transformstream 不能直接处理 html 字符串或 dom 节点，因其仅工作于 readablestream/writablestream 的字节块层面；必须先通过 textdecoderstream 将 fetch().body 等原始流解码为字符串流，再接入自定义 transformstream 进行逐块处理，而 innerhtml 或 domparser 是同步操作，流已结束，无法介入。
TransformStream 不能直接处理 HTML 字符串或 DOM 节点，它只工作在 ReadableStream 和 WritableStream 的字节/块数据层面。想对 HTML 做流式转换，必须先把 HTML 当作原始文本流（比如 fetch().body），再用 TextDecoderStream 解码，最后塞进自定义 TransformStream 处理。
为什么不能直接用 TransformStream 处理 innerHTML 或 DOMParser？
因为 innerHTML = htmlString 或 DOMParser.parseFromString() 都是同步解析，输入已经是完整字符串，流早已结束；TransformStream 没有机会介入。它不监听 DOM 变化，也不解析 HTML AST——它只处理流式到达的 Uint8Array 或 string 块。
- 常见错误现象：
new TransformStream().readable.getReader()立刻报错TypeError: readable is not readable，是因为没接上游流 - 真实使用场景：仅适用于
fetch返回的Response.body、File.stream()、WebSocket 的message事件流等可读流源头 - 若你从
JSON.stringify({ html: '...' })开始，那已经不是流，得先转成new ReadableStream({ start(c) { c.enqueue(htmlString); c.close(); } })才能进管道
如何对 fetch 返回的 HTML 片段做脱敏处理？
这是最典型的可行路径：后端返回纯 HTML 片段（如 <div>手机号：13912345678</div>），前端在解析前逐块替换敏感文本。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须先用
TextDecoderStream把Uint8Array转为string，否则transform()收到的是二进制块，正则无效 - 脱敏逻辑要写在
transform(chunk, controller)里，用chunk.replace(/1[3-9]\d{9}/g, '1****5678')这类正则，不能依赖 DOM API - 注意 chunk 可能被任意截断（如手机号跨块），简单正则会漏匹配；生产环境建议用
htmlparser2的流式 parser，或缓存末尾未闭合标签/数字片段做跨块拼接 - 示例关键链路：
fetch(url).then(r => r.body).pipeThrough(new TextDecoderStream()).pipeThrough(new TransformStream({ transform(chunk, ctrl) { ctrl.enqueue(chunk.replace(/\d{11}/g, '****')); } }))
为什么 new HTMLStream() 会报 ReferenceError？
因为 HTMLStream 不是标准 API，Chrome/Firefox 均未实现。某些文档提到的 HTMLStream 是概念性封装，底层仍是手写的 TransformStream + 自定义 HTML 解析逻辑。
- 不能用
querySelectorAll：流中 HTML 还没构建 DOM，调用会报document is not defined或返回空 - 替代方案只有两种：用正则做轻量文本替换（快但不可靠），或集成
htmlparser2的Parser实例，在onopentag/ontext回调中判断并修改文本内容 -
htmlparser2是事件驱动，需在transform()中维护 parser 实例和内部状态（如当前是否在<script></script>标签内），避免误处理脚本内容 - 性能影响明显：每块数据都要触发多次 parser 回调，比纯正则慢 3–5 倍；若 HTML 片段小且结构简单，优先用正则
真正难的不是写 TransformStream，而是判断哪部分 HTML 内容该脱敏、哪部分不该（比如代码块里的手机号是示例，不能动）；这需要语义上下文，而流式处理天然缺乏上下文，必须靠人工规则或预埋标记来规避。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
