如何用JavaScript正则表达式将修改后文本放回原HTML标签？

问题描述 #

从Wix Studio通过$w('Text').html获取HTML字符串（示例格式：<h1 class="wixui-rich-text__text">Add a Title</h1>），需要把标签内的每个字母用<span>包裹后放回原标签。目标标签包含<h1>至<h6>、<p>，且禁止使用jQuery。目前已能剥离标签处理文本，但无法将处理后的内容归位到原标签结构中。

现有代码 #

// 从Wix通过Wix Editor Elements ($w) API获取字符串
var html = $w('Text').html;

var string = html.replace(/(<([^>]+)>)/ig, ''), 
    wrap = string.replace(/\w/g, "<span>$&</span>");

解决方案 #

通过正则匹配完整的标签结构，捕获开始标签、标签名、内部文本和结束标签，再将处理后的文本拼接回原标签：

var html = $w('Text').html;

// 匹配目标标签的完整结构，拆分出各部分内容
var processedHtml = html.replace(/(<([h1-6p][^>]+)>)([\s\S]*?)(<\/\2>)/i, function(match, openTag, tagName, content, closeTag) {
    // 把文本内容的每个字母用<span>包裹
    var wrappedContent = content.replace(/\w/g, "<span>$&</span>");
    // 拼接回完整的HTML结构
    return openTag + wrappedContent + closeTag;
});

// 将处理后的HTML重新赋值给组件
$w('Text').html = processedHtml;

代码说明 #

• 正则/(<([h1-6p][^>]+)>)([\s\S]*?)(<\/\2>)/i作用：
  • <([h1-6p][^>]+)>：匹配<h1>至<h6>或<p>的开始标签，同时捕获标签名和自带属性
  • ([\s\S]*?)：非贪婪匹配标签内所有内容（包含换行符）
  • <\/\2>：匹配对应结束标签，\2引用之前捕获的标签名，确保标签闭合正确
• 回调函数处理捕获到的文本内容后，重新拼接回原标签结构，完整保留原标签的属性
• 最后将处理后的HTML重新赋值给Wix组件的html属性

内容的提问来源于stack exchange，提问作者Marc Sanders