使用JavaScript正则匹配组移除HTML span标签并保留内容

这问题我之前也碰到过！要移除那些带固定属性的<span>标签但留下里面的内容，其实有两种靠谱的路子，看你的需求选就行：

方法一：正则表达式（适合简单固定场景） #

因为你的<span>标签格式是完全固定的（带contenteditable="false"和class="fr-deletable"属性），直接用全局正则替换就能搞定，不用绕弯子：

var x = '<p>Hello there <span contenteditable="false" class="fr-deletable">aaa</span>,<br></p><p>Hi <span contenteditable="false" class="fr-deletable">bbbb</span>,<br></p>';

// 匹配目标span的开始标签和结束标签，全局替换为空
var processedStr = x.replace(/<span contenteditable="false" class="fr-deletable">|<\/span>/g, '');

console.log(processedStr);
// 输出结果：'<p>Hello there aaa,<br></p><p>Hi bbbb,<br></p>'

这个正则里的|是分隔两种匹配模式，g表示全局替换，确保所有符合的标签都会被移除。

方法二：DOM解析（更鲁棒，适配复杂场景） #

如果以后<span>的属性可能有变化（比如属性顺序调整、新增其他属性），正则就容易失效，这时候用DOM解析的方法更稳妥：

var x = '<p>Hello there <span contenteditable="false" class="fr-deletable">aaa</span>,<br></p><p>Hi <span contenteditable="false" class="fr-deletable">bbbb</span>,<br></p>';

// 第一步：把转义的HTML字符转回真实HTML
var decodedHtml = x.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// 创建临时DOM容器来解析HTML
var tempContainer = document.createElement('div');
tempContainer.innerHTML = decodedHtml;

// 找到所有符合条件的span标签
var targetSpans = tempContainer.querySelectorAll('span.fr-deletable[contenteditable="false"]');

// 遍历每个span，用它的文本内容替换自身
targetSpans.forEach(span => {
  span.replaceWith(span.textContent);
});

// 最后把处理后的HTML再转义回原格式
var processedStr = tempContainer.innerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');

console.log(processedStr);
// 同样得到预期结果

这个方法的核心是利用浏览器的DOM解析能力来处理HTML，不管标签的属性怎么变，只要选择器写对，就能精准找到目标标签并处理，容错性更强。

内容的提问来源于stack exchange，提问作者7ball