JavaScript 正则替换 HTML 标签内文本内容的完整方案

本文介绍如何使用纯 JavaScript 正则表达式精准替换 HTML 字符串中任意标签（如、等）内的纯文本字符，将其逐字包裹为，同时保留原始标签结构与属性，适用于 Wix Velo 等无法使用 DOM 解析的环境。

本文介绍如何使用纯 javascript 正则表达式精准替换 html 字符串中任意标签（如 `

`、`

` 等）内的纯文本字符，将其逐字包裹为 ``，同时保留原始标签结构与属性，适用于 wix velo 等无法使用 dom 解析的环境。

在前端开发中，尤其是像 Wix Studio 这类受限运行时环境（不支持 DOMParser 或 jQuery），常需直接操作 HTML 字符串。一个典型需求是：提取某 HTML 标签内的纯文本内容，逐字符包装后，原样塞回原标签中，且不破坏原有标签名、属性及嵌套结构。

例如，输入：

<h1 class="wixui-rich-text__text">Add a Title</h1>

期望输出：

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

⚠️ 注意：不能简单用 replace(/]*>/g, '') 先剥离再拼接——这会丢失标签属性，也无法处理嵌套（如

Text bold end

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

中仅需包装

的纯文本部分，而非 内容）。

✅ 正确解法是使用 正向先行断言（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：匹配单个单词字符（字母、数字、下划线），g 全局、i 忽略大小写；
'$&'：将每个匹配字符 $& 包裹进。

? 进阶增强（推荐用于生产环境）：
若需兼容更复杂场景（如空格、换行、中文、标点等），可扩展匹配范围，并避免干扰已有 HTML 结构：

// 匹配所有非标签、非空白符的可见字符（含中文、标点）
const enhanced = html.replace(
  /(?]+)>[^]*))[\p{L}\p{N}]/gu, 
  '<span>$&</span>'
);

✅ 使用 [\p{L}\p{N}]（Unicode 字母+数字）配合 u 标志，支持中文、日文等；g 保证全局替换。

? 注意事项：

此方案不解析 HTML 语法树，因此对严重 malformed HTML（如未闭合标签、属性含 >）可能失效；
若内容含 <script>、<style> 或注释 ，需额外预处理排除；</script>
如需处理多层嵌套文本（如
Hello world!
中仅包装 Hello 和 !，跳过内容），正则已天然支持——因先行断言只锚定最外层标签开头，内部标签被视为普通文本，其内容不会被二次匹配（前提是内部标签未被 [^]* 意外截断）。

✅ 总结：
该正则方案轻量、零依赖、兼容性好（现代浏览器均支持 lookbehind），完美契合 Wix Velo、SSR 渲染或字符串预处理等 DOM 不可用场景。核心思想是「锚定标签边界，精准注入」，而非「剥离-重构」，既安全又高效。