HTML中如何使用TransformStream转换流数据

本文深入解析了在HTML环境中正确使用TransformStream进行流式数据转换的核心原理与实践陷阱：TransformStream无法直接处理HTML字符串或DOM节点，仅能操作底层字节块，因此必须通过TextDecoderStream将fetch等源头的原始流解码为字符串流后，再接入自定义TransformStream进行逐块文本处理；文章重点揭示了常见误区（如误用innerHTML、DOMParser或虚构的HTMLStream）、典型可行场景（如对HTML片段实时脱敏），并对比了轻量正则替换与htmlparser2流式解析的适用边界，强调真正挑战在于流式环境下缺乏语义上下文所带来的精准处理难题——这要求开发者在性能、可靠性与业务规则间谨慎权衡。

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 片段（如

• 必须先用 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 实例和内部状态（如当前是否在