javascript - 替换整个文档源代码中的字符串

Question

我有一个 HTML 文档，其中有一个我想要替换的字符串。以下是字符串 (9673):

<meta property="og:description" content="***April &amp;nbsp;9673&amp;nbsp;" />
<span class="agent-phone-number">+5 9673</span>
<a href="#shownumber" class="js-agent-phone-number"><span class="agent-phone-number" data-mobile="9673">9673</span></a>
<span class="agent-phone-number">+5 9673</span>
<li><a href="sms:9673" class="js-agent-phone-number-sms"><i class="pgicon pgicon-comment-o"></i>SMS</a></li>

加载文档后，我想注入(inject) Javascript 将字符串 9673 替换为 0000。我怎么做？我只需要 Javascript 部分，它可以搜索整个 HTMLL 文档并替换字符串。

Answer 1

编写快、运行慢的答案是滥用 innerHTML:

function replace_9673_everywhere() {
    
    const documentHtml = document.documentElement.innerHTML;
    const newDocumentHtml = documentHtml.replace( /9673/g, '0000' );
    document.documentElement.innerHTML = newDocumentHtml;
}

...但这可能会破坏文档，因为它会让浏览器重新解析所有内容(因此任何带有 DOM 元素引用的当前页面脚本状态都将被破坏)。

---

更好的方法是遍历 DOM，因为如果您操作 Element.attributes 和 Element.textContent (以及 #text 节点)并避免完全使用 innerHTML/outerHTML:

function replace_9673_everywhere() {
    const rootNode = document.documentElement;
    replace_9673_in_element( rootNode );
}

function replace_9673_in_element( el ) {
    // Replace in attributes:
    for( let i = 0; i < el.attributes.length; i++ ) {
        const attr = el.attributes.item(i);
        if( attr.value.includes( '9673' ) ) {
            attr.value = attr.value.replace( /9673/g, '0000' );
        }
    } 

    // Replace in child nodes (not just Element children):
    for( const childNode of el.childNodes ) {
        if( childNode.nodeType === Node.TEXT_NODE ) {
            if( childNode.textContent.includes( '9673' ) ) {
                childNode.textContent = childNode.textContent.replace( /9673/g, '0000' );
            }
        }
        else if( childNode.nodeType === Node.ELEMENT_NODE ) {
            replace_9673_in_element( childNode );
        }
    }
}