网站首页 > 知识剖析 正文
在 WordPress 上更新和处理 HTML 是非常不方便的,甚至有点不舒服,正则表达式难用并且可能导致各种错误,DOMDocument 又非常占用资源,并且在处理现代的 HTML 经常失败,而且很多虚拟主机无法使用。
所以 WordPress 6.2 引进了 WP_HTML_Tag_Processor,一个给 WordPress 开发者调整 HTML 标签属性的工具,他是 WordPress 新的 HTML 处理 API 的第一个组件。
更新 HTML 属性
WP_HTML_Tag_Processor 可以找到特定的标签并可以更改其属性,下面例子是在一段 HTML 中的找到第一个 img 标签,然后给它设置 alt 标签:
$html = '<img src="/husky.jpg">';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Husky in the snow' );
}
echo $p->get_updated_html();
// 输出:
// <img alt="Husky in the snow" src="/husky.jpg">
简单说明一下:next_tag() 方法会移动到 HTML 中的下一个可用标签,它也可以通过标签名,CSS 类名 或者使用两者一起去找到特定的标签。根据 HTML 规范,通过标签和属性名称的查找不区分大小写,但通过 CSS 类名查找则区分。
if ( $p->next_tag( array( 'tag_name' => 'DIV', 'class_name' => 'block-GROUP' ) ) ) {
$p->remove_class( 'block-group' );
$p->add_class( 'wp-block-group' );
}
自动转义和解码
默认情况下下面这些操作是安全的:
- 没有检查一个属性是否存在就去删除它而
- 添加一个可能已经存在的 CSS 类,
- 设置一个属性值而没有确保已有相同重复的属性值
所以不必担心代码会将 <textarea> 中内容或者属性值,甚至 HTML 注释误认为是一个标签。
WP_HTML_Tag_Processor 遵循 HTML5 规范,所以不用自己写代码去处理,它会在必要的时候自动转义和解码,并且知道如何处理格式错误的标签。
$ugly_html = <<<HTML
<textarea title='<div> elements are semantically void'>
<div><!--<div attr-->="</div>"></div>">
</textarea>
<div></div>
HTML;
$p = new WP_HTML_Tag_Processor( $ugly_html );
if ( $p->next_tag( 'div' ) ) {
$p->add_class( 'bold' );
}
echo $p->get_updated_html();
// 输出:
// <textarea title='<div> elements are semantically void'>
// <div><!--<div attr-->="</div>"></div>">
// </textarea>
// <div class="bold"></div>
速度足够快
WP_HTML_Tag_Processor 运行速度经测试已足够快,可以在关键的代码中运行,它不会产生额外的内存开销,在 WordPress 6.2 中,可以使用它取代容易出错的正则表达式和字符搜索串的代码 ,来执行相同的 HTML 更新。
当然它还有一些更高级的用法,在 WordPress 6.2 发布之后,可以直接阅读 class 中相关的文档来学习如何使用。
WP_HTML_Tag_Processor 也有不会去做的事情,比如:不构建 DOM 文档树、查找嵌套标签或更新标签的内部 HTML 或内部文本。未来 WordPress HTML 相关的功能会给予这个 class 之上,使得可以查看所有标签,使用 CSS 选择器查找标签,并使用新标签修改 HTML 结构,删除标签和修改内部结构等。
- 上一篇: 5分钟看懂独立站SEO新手指南(下)
- 下一篇: 测试开发如何快速上手Vue前端开发(下)
猜你喜欢
- 2025-01-07 8个移动端适配技巧,兼容性问题减少90%
- 2025-01-07 测试开发如何快速上手Vue前端开发(下)
- 2025-01-07 5分钟看懂独立站SEO新手指南(下)
- 2025-01-07 是什么组成了html?html组成元素有哪些?
- 2025-01-07 爬虫批量获取图片的思路与方法
- 2025-01-07 在企业网站建设中如何正确使用H标签?
- 2025-01-07 自适应设计:自适应图片的完整教程
- 2025-01-07 「转行测试开发-HTML」(六)---div和span、图像标签的使用
- 2025-01-07 企业SEO网站优化方案流程
- 2025-01-07 JSP页面实现验证码校验
- 最近发表
-
- 表格存储 SQL 查询多元索引(表格存储 sql 查询多元索引的方法)
- 数据库教程-SQL Server多条件模糊查询
- Twitch宣布放弃Flash并逐步转型至HTML5平台
- 移动平台最强播放器MX Player:终于支持安卓5.0了!
- win10 NFS+黑群晖远程加载管理Windows文件夹(读写NTFS格式+高清播放器)
- Android端VLC 3.3版本发布,重新设计播放器界面
- 不仅仅被苹果封杀!Youtube宣布迁移Flash
- 揭开网站背后的魔法:B/S系统原来这么简单!
- Adobe Animate (An) 2020网页设计软件下载和安装教程
- Adobe发布“巨量”安全更新:遏制Flash“祸害”Linux
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)