当前位置：首页 > news >正文

WHAT - HTMLRewriter 介绍（页面优化、SEO、广告注入）

news 2025/9/9 15:15:23

文章目录

一、概念
二、典型应用场景
三、基本用法（Cloudflare Workers 示例）
四、Handler 可用方法
- 1. element(element)
- 2. text(textChunk)
五、局限性
六、简单对比

一、概念

HTMLRewriter 是一种 流式 HTML 解析与重写工具。

它常见于 Cloudflare Workers 等边缘计算平台，用来在 HTML 文档传输过程中，对响应内容进行实时解析、修改或增强，而无需等到整个文档下载完成再操作。

它的特点是：

流式解析：逐块读取并处理 HTML，适合边缘和大规模场景，内存占用低。
选择器 API：类似于浏览器的 querySelector / querySelectorAll，可以匹配元素。
事件驱动：对匹配到的 HTML 元素执行回调，比如修改属性、替换文本、插入内容。
高性能：适合对大体量 HTML 文档做轻量变更。

二、典型应用场景

页面注入
- 动态插入广告、统计代码、AB 实验脚本。
内容替换
- 修改 HTML 中的文字、替换图片地址。
SEO 优化
- 在页面返回时，动态调整 meta 标签。
多语言支持
- 根据请求头语言，替换部分文案。
隐私与安全
- 自动清理敏感信息或过滤危险标签。

三、基本用法（Cloudflare Workers 示例）

export default {async fetch(request, env, ctx) {const response = await fetch("https://example.com")return new HTMLRewriter().on("title", new TitleHandler()).on("a", new LinkHandler()).transform(response)},
}class TitleHandler {element(element) {element.setInnerContent("新的标题")  // 替换 <title>}
}class LinkHandler {element(element) {element.setAttribute("target", "_blank") // 修改 <a> 标签属性}
}

说明：

new HTMLRewriter() 创建重写器实例。
.on(selector, handler) 注册处理器，对匹配到的元素进行修改。
handler 是一个对象，可以定义多个方法（如 element()、text()）。
.transform(response) 返回修改过的 Response。

四、Handler 可用方法

1. element(element)

当解析器遇到匹配的 HTML 元素时触发。
常见 API：

element.setInnerContent(content, options) → 替换内容
element.append(content, options) → 追加内容
element.prepend(content, options) → 前置内容
element.remove() → 移除元素
element.setAttribute(name, value) → 设置属性
element.removeAttribute(name) → 删除属性

2. text(textChunk)

当匹配的元素内部有 文本节点 时触发（会被分块调用）。
常见 API：

textChunk.text → 获取文本
textChunk.replace(content) → 替换文本

五、局限性

不能执行 JavaScript（只改 HTML 结构）。
不能像 DOM API 那样完整支持所有操作（它是流式处理）。
主要用于 服务端/边缘侧的 HTML 重写，而非浏览器端动态修改。

六、简单对比

工具	运行位置	特点
`HTMLRewriter`	边缘/服务端	流式解析，低内存，实时修改 HTML 响应
`DOMParser`	浏览器端	需要完整加载 HTML，内存占用高
`cheerio`	Node.js	类 jQuery API，需完整 DOM 构建