Replace string in entire document source code

Question

I have a HTML document, with a string that I want to replace. Here are the strings (9673):


+5 9673
9673
+5 9673
SMS

Post loading a document, I want to inject a Javascript to replace the string 9673 to 0000. How do I do that? I only need the Javascript part where it searches entire HTMLL document and replaces the string.

user_159145 · Answer

The quick-to-write, slow-to-run answer is to abuse innerHTML:

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

...but this will probably break the document because it will make the browser re-parse everything (so any current page script-state with DOM element references will be broken).

A better approach is to traverse the DOM as this won't trigger a reparse provided you manipulate Element.attributes and Element.textContent (and #text nodes individually) and avoid using innerHTML / outerHTML entirely:

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 );
        }
    }
}

user_8318731 · Answer

Here's another approach, using TreeWalkers, that targets text nodes and attributes only, without messing with the actual HTML structure.

function* iterateNodes(walker) {
    let next

    while (next = walker.nextNode()) {
        yield next
    }
}

const nodesUnder = (el, nodeFilters) => {
    const walker = document
        .createTreeWalker(el, nodeFilters)

    const nodes = iterateNodes(walker)

    return [...nodes]
}

const htmlEl = document.documentElement

const textNodes = nodesUnder(htmlEl, NodeFilter.SHOW_TEXT)

const attrNodes = nodesUnder(htmlEl, NodeFilter.SHOW_ELEMENT)
    .map(el => [...el.attributes])
    .flat()

;[...textNodes, ...attrNodes].forEach(node => {
    node.nodeValue = node.nodeValue.replace(/9673/g, '0000')
})

console.log(document.querySelector('#outer').outerHTML)

* { font-family: sans-serif }


    9673 (changed)
    unchanged

user_5010028 · Answer

You want something like this

function replace9673() {
  $("html").html($("html").html().replaceAll("9673", "0000"));
}








+5 9673
9673
+5 9673
SMS

Replace string in entire document source code

3 Answers