如何用JavaScript移除span标签内的所有嵌套span标签？

方法一：DOM操作（推荐，更可靠） #

直接通过DOM API处理元素，避免正则处理HTML的局限性，步骤如下：

• 定位到最外层的<span class="test">元素
• 遍历它的子节点，只保留有效文本内容，移除所有嵌套的空span标签
• 把整理后的文本放回外层span中

代码示例：

// 获取目标外层span
const outerSpan = document.querySelector('.test');
let textContent = '';

// 遍历子节点，提取有效文本
outerSpan.childNodes.forEach(node => {
  if (node.nodeType === Node.TEXT_NODE) {
    // 保留非空白文本，处理多余空格
    const text = node.textContent.trim();
    if (text) textContent += text + ' ';
  }
});

// 更新外层span的内容
outerSpan.innerHTML = textContent.trim();

方法二：正则替换（仅适用于空嵌套span场景） #

如果只是处理空的嵌套span标签（比如你例子里的<span></span>或带class的空span），可以用正则匹配替换，但注意这种方法只适合结构简单的情况，若谷歌文档生成的span包含其他内容可能失效。

代码示例：

const originalHtml = '<span class="test"> <span> </span> Hello I am here <span class="test1"> </span> </span>';
// 匹配所有空的span标签（包括带属性的）并替换为空
let cleanedHtml = originalHtml.replace(/<span[^>]*>\s*<\/span>/g, '');
// 去除多余的连续空格
cleanedHtml = cleanedHtml.replace(/\s+/g, ' ');

console.log(cleanedHtml);
// 输出：<span class="test"> Hello I am here </span>

说明：优先用DOM方法，因为谷歌文档动态生成的HTML结构可能有变化，DOM操作能准确识别节点类型，不会因为标签属性、嵌套深度变化而出错。

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