如何在JavaScript字符串中移除标点且不修改HTML标签？

你当前的核心问题是直接操作元素的innerHTML——这会把标签结构和文本内容混在一起当成字符串处理，正则会误匹配标签属性里的标点（比如class、id中的符号，SVG路径的坐标符号），自然会破坏页面结构。

正确思路：只处理纯文本节点 #

不要碰HTML标签的结构，递归遍历DOM树，只筛选出纯文本节点进行修改，完全避开标签部分。

修正后的代码示例 #

function removePunctuation(text) {
    // 修正正则：移除HTML实体&，改用原生&匹配文本中的&
    return text.replace(/[\.#!£$%\^&*;:{}=\-_`~()@+\?\[\]+]/g, ' ')
               .replace(/  +/g, ' ');
}

function processTextNodes(node, excludeTags = ['script', 'style', 'noscript']) {
    // 跳过不需要处理的标签（避免破坏JS、样式代码）
    if (excludeTags.includes(node.tagName?.toLowerCase())) return;

    if (node.nodeType === Node.TEXT_NODE) {
        // 只处理非空的有效文本节点
        if (node.nodeValue.trim()) {
            node.nodeValue = removePunctuation(node.nodeValue);
        }
    } else {
        // 递归遍历所有子节点
        for (const child of node.childNodes) {
            processTextNodes(child, excludeTags);
        }
    }
}

// 从body开始遍历处理所有文本节点
processTextNodes(document.body);

代码说明 #

1. 只处理文本节点：通过node.nodeType === Node.TEXT_NODE精准定位纯文本内容，完全不触碰HTML标签的结构和属性
2. 跳过特殊标签：排除script、style等标签，避免破坏页面的功能代码和样式
3. 避免无效处理：过滤空文本节点，减少不必要的计算

为什么之前的方法不可行 #

用querySelectorAll获取标签后修改innerHTML，相当于把元素内的所有内容（包括子标签的HTML代码）都当成字符串处理。正则几乎不可能精准区分「标签内的属性值」和「用户可见的纯文本」，必然会误改标签结构、属性甚至SVG路径。

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