WordPress 6.2 引进了速度更快的 HTML 处理 API

myzbx 2025-01-01 21:41 18 浏览

在 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 结构，删除标签和修改内部结构等。

HTML API

上一篇：JavaScript知识点——详细的Cookie总结
下一篇：Js调用api接口

WordPress 6.2 引进了速度更快的 HTML 处理 API

更新 HTML 属性

自动转义和解码

速度足够快

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」