如何用正则表达式精准替换 HTML 字符串中标签内的文本内容

本文介绍在不依赖 DOM 解析或 jQuery 的前提下，使用 JavaScript 正则表达式安全、高效地替换任意 HTML 标签（如到、等）内部的纯文本字符，并为其逐字包裹标签。

本文介绍在不依赖 dom 解析或 jquery 的前提下，使用 javascript 正则表达式安全、高效地替换任意 html 标签（如 `

` 到 `

`、`

` 等）内部的纯文本字符，并为其逐字包裹 `` 标签。

在 Wix Studio 等受限环境（无法直接操作 DOM 节点、禁用 jQuery）中，开发者常需对 $w('Text').html 返回的 HTML 字符串进行纯字符串级处理。常见需求是：保留原始标签结构与属性，仅将标签内文本内容中的每个字母/数字字符单独包裹为 （例如实现逐字动画效果）。

直接使用 replace(/]+>/g, '') 剥离标签再拼接的方式存在严重缺陷——它会丢失嵌套结构（如

Text bold end

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

中 标签会被误删），且无法保证新内容准确回填到对应起始/结束标签之间。

✅ 推荐方案：使用正向先行断言（positive lookbehind）定位“位于开始标签之后、结束标签之前”的可匹配字符：

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>"

? 正则解析：

(?前面满足指定模式（不消耗字符）；
(]+)>)：捕获起始标签，如
，其中 [^>]+ 匹配非 > 的任意字符；
[^]*：匹配该起始标签后、下一个前的所有非标签字符（即目标文本区域）；
\w：匹配字母、数字、下划线（如需包含中文等 Unicode 字符，可改用 [\p{L}\p{N}] 并添加 u 标志）；
gi：全局 + 不区分大小写匹配。

⚠️ 注意事项：

不适用于含嵌套标签的文本区域：若目标内容本身含 Hello world!），[^]* 会提前终止匹配。此时应优先考虑 DOMParser（若环境支持）；
避免过度依赖正则处理 HTML：正则无法可靠解析复杂 HTML；本方案仅适用于「标签简单、内容为纯文本或少量内联标签」的已知可控场景；
空格与符号处理：当前正则仅匹配 \w；若需包裹空格、标点，可扩展为 /(?]+)>[^]*))[\w\s.,!?]/gi（注意转义）；
性能友好：单次正则扫描完成，无字符串拆分/拼接开销，适合 Wix Velo 等轻量运行时。

? 总结：当必须纯字符串操作 HTML 且结构简单时，/(?]+>[^]*)\w/gi 是简洁可靠的解决方案；但请始终评估是否可通过 new DOMParser().parseFromString() 安全解析并操作 DOM——它更健壮、语义清晰，应为首选。