如何用JavaScript移除字符串中的span标签及其内容？

方法一：正则表达式（适合简单无嵌套的场景） #

如果你的HTML结构里没有嵌套的<span>标签，用正则表达式可以快速解决：

const str = "<li class='test'>
    <div class='myDiv' >
    <span class='myClass'>Person is a: </span>
    <a class='myLink' tabindex='0'> Great citizen. Really nice guy</a>
    </div>
    </li>";

// 移除所有<span>标签及其内部内容
const result = str.replace(/<span[^>]*>[\s\S]*?<\/span>/gi, '');
console.log(result);

正则说明：

• <span[^>]*>：匹配<span>开头的标签，[^>]*匹配标签内的所有属性（直到>`为止）
• [\s\S]*?：匹配<span>和</span>之间的任意内容（包括换行），?启用非贪婪模式，避免误匹配多个<span>的情况
• <\/span>：匹配闭合的</span>标签
• gi：全局匹配+忽略大小写（确保匹配所有符合的标签）

方法二：DOM解析（更可靠，适合复杂HTML结构） #

正则处理HTML存在局限性（比如嵌套标签、特殊字符等），用浏览器原生的DOM API解析是更稳妥的方式：

const str = "<li class='test'>
    <div class='myDiv' >
    <span class='myClass'>Person is a: </span>
    <a class='myLink' tabindex='0'> Great citizen. Really nice guy</a>
    </div>
    </li>";

// 创建临时DOM元素
const tempDiv = document.createElement('div');
tempDiv.innerHTML = str;

// 找到所有<span>元素并移除
const spans = tempDiv.querySelectorAll('span');
spans.forEach(span => span.remove());

// 获取处理后的HTML字符串
const result = tempDiv.innerHTML;
console.log(result);

这种方法会自动处理HTML的结构问题，不管<span>有没有嵌套或者复杂属性，都能准确移除。

内容的提问来源于stack exchange，提问作者Mabeh Al-Zuq Yadeek