jQuery文本替换时如何排除输入框内容避免页面破损

原代码的问题根源 #

你现在的写法本质是把整个页面的HTML当普通字符串来处理，根本没区分哪些是要展示的正文、哪些是页面结构本身的代码：

• 直接抓取<body>下的全部HTML字符串做全局正则替换，输入框预填值、脚本代码、标签属性值里的$开头内容都会被命中
• 一旦替换逻辑把带<a>标签的HTML字符串塞到输入框的属性、textarea的文本结构里，会直接截断原有HTML标签，导致输入框提前闭合、页面结构完全错乱

调整思路 #

彻底抛弃「抓整个body源码硬替换」的粗暴实现，改成定向遍历页面上的纯文本节点，遍历过程中碰到输入框、文本域、脚本、样式这类不需要处理的元素直接跳过，只对真正要展示给用户的正文文本做匹配替换，从根源上避免碰坏表单结构。

修正后的完整脚本 #

$(document).ready(function(){
    // 定义绝对跳过的节点类型，不处理这些元素的内部内容
    const skipNodeList = ['INPUT', 'TEXTAREA', 'SCRIPT', 'STYLE', 'SELECT', 'OPTION'];

    // 递归遍历页面文本节点的工具方法
    function traverseTextNodes(rootNode, processCallback) {
        // 节点本身是纯文本节点时，直接交给回调处理
        if (rootNode.nodeType === Node.TEXT_NODE) {
            processCallback(rootNode);
            return;
        }
        // 碰到跳过名单里的元素，直接终止当前分支的遍历
        if (skipNodeList.includes(rootNode.nodeName)) return;

        // 递归遍历所有子节点
        rootNode.childNodes.forEach(childNode => traverseTextNodes(childNode, processCallback));
    }

    // 对匹配到的纯文本节点执行股票代码替换逻辑
    traverseTextNodes(document.body, function(textNode) {
        const rawText = textNode.nodeValue;
        // 跳过无意义的空文本，减少不必要的计算
        if (!rawText.trim()) return;

        const replacedText = rawText.replace(/\$([a-zA-Z]+)\b/g,
            '<a href="https://finance.yahoo.com/quote/$1" class="stock-link">$1</a>'
        );

        // 没有匹配到可替换内容时直接跳过
        if (replacedText === rawText) return;

        // 把替换后的HTML内容转成DOM节点，插入到原文本节点的位置
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = replacedText;
        const parentNode = textNode.parentNode;
        
        // 逐个插入新生成的链接节点
        tempContainer.childNodes.forEach(newNode => {
            parentNode.insertBefore(newNode, textNode);
        });
        // 移除原来的纯文本节点
        parentNode.removeChild(textNode);
    });
});

关键改动的实际效果 #

• 表单保护：遍历过程中一旦碰到输入框、文本域、下拉选择框这类表单元素，会立刻停止深入遍历，永远不会修改输入框的预填值、用户已输入的内容，从根源上解决输入框被HTML截断的问题
• 结构安全：不再重写整个body的HTML结构，只对独立的纯文本节点做替换，哪怕替换生成了带链接的HTML节点，也不会影响周边原有标签的结构完整性
• 误改防护：不会再把脚本、样式块、按钮属性里的$符号（比如脚本变量、价格字段）误替换成股票链接
• 性能优化：加了空文本过滤、匹配结果判断，没有命中规则的节点直接跳过，比原来的全量HTML替换运行效率更高

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