本文介绍在不依赖 DOM 解析或 jQuery 的前提下，使用 JavaScript 正则表达式安全、高效地替换任意 HTML 标签（如 <h1> 到 <h6>、<p> 等）内部的纯文本字符，并为其逐字包裹 <span> 标签。
本文介绍在不依赖 dom 解析或 jquery 的前提下，使用 javascript 正则表达式安全、高效地替换任意 html 标签（如 `
` 到 ``、`
` 等）内部的纯文本字符，并为其逐字包裹 `` 标签。
在 Wix Studio 等受限环境（无法直接操作 DOM 节点、禁用 jQuery）中，开发者常需对 $w('Text').html 返回的 HTML 字符串进行纯字符串级处理。常见需求是：保留原始标签结构与属性，仅将标签内文本内容中的每个字母/数字字符单独包裹为 <span>（例如实现逐字动画效果）。
直接使用 replace(/<[^>]+>/g, '') 剥离标签再拼接的方式存在严重缺陷——它会丢失嵌套结构（如 <p>Text <b>bold</b> end</p> 中 <b> 标签会被误删），且无法保证新内容准确回填到对应起始/结束标签之间。
✅ 推荐方案：使用正向先行断言（positive lookbehind）定位“位于开始标签之后、结束标签之前”的可匹配字符：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const html = '<h1 class="wixui-rich-text__text">Add a Title</h1>'; const result = html.replace(/(?<=(<([^>]+)>[^<>]*))\w/gi, '<span>$&</span>'); console.log(result); // → "<h1 class=\"wixui-rich-text__text\"><span>A</span><span>d</span><span>d</span> <span>a</span> <span>T</span><span>i</span><span>t</span><span>l</span><span>e</span></h1>"
? 正则解析：
立即学习“前端免费学习笔记（深入）”；
- (?<=...)：正向先行断言，确保匹配位置前面满足指定模式（不消耗字符）；
- (<([^>]+)>)：捕获起始标签，如 <h1 class="...">，其中 [^>]+ 匹配非 > 的任意字符；
- [^<>]*：匹配该起始标签后、下一个 < 或 > 前的所有非标签字符（即目标文本区域）；
- \w：匹配字母、数字、下划线（如需包含中文等 Unicode 字符，可改用 [\p{L}\p{N}] 并添加 u 标志）；
- gi：全局 + 不区分大小写匹配。
⚠️ 注意事项：
- 不适用于含嵌套标签的文本区域：若目标内容本身含 <（如 <p>Hello <em>world</em>!</p>），[^<>]* 会提前终止匹配。此时应优先考虑 DOMParser（若环境支持）；
- 避免过度依赖正则处理 HTML：正则无法可靠解析复杂 HTML；本方案仅适用于「标签简单、内容为纯文本或少量内联标签」的已知可控场景；
- 空格与符号处理：当前正则仅匹配 \w；若需包裹空格、标点，可扩展为 /(?<=(<([^>]+)>[^<>]*))[\w\s.,!?]/gi（注意转义）；
- 性能友好：单次正则扫描完成，无字符串拆分/拼接开销，适合 Wix Velo 等轻量运行时。
? 总结：当必须纯字符串操作 HTML 且结构简单时，/(?<=<[^>]+>[^<>]*)\w/gi 是简洁可靠的解决方案；但请始终评估是否可通过 new DOMParser().parseFromString() 安全解析并操作 DOM——它更健壮、语义清晰，应为首选。
