Update the content on a webpage dynamically after the page has loaded

Question

Update the content on a webpage dynamically after the page has loaded

Is there a way to dynamically replace text on a webpage, even if it is added or changed by JavaScript in the future? I have checked various solutions in this thread about replacing words in body text, but they only seem to work on existing text at the time of execution.

javascript html css dom mutation-observers

Answer 1

Answer №1

Discovering the complexity of achieving optimal performance and functionality in HTML, a supposedly declarative markup language, proved to be challenging. Below, I have outlined my discoveries after a month of extensive testing and experimentation.

To begin replacing existing text efficiently, we will utilize TreeWalker to iterate through every Text node in the document and process their content. In this demonstration, we will censor "heck" with "h*ck".

const callback = text => text.replaceAll(/heck/gi, 'h*ck');

function processNodes(root) {
    const nodes = document.createTreeWalker(
        root, NodeFilter.SHOW_TEXT, { acceptNode:
        node => valid(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
    });
    while (nodes.nextNode()) {
        nodes.currentNode.nodeValue = callback(nodes.currentNode.nodeValue);
    }
}

function valid(node) {
    return (
        node.parentNode !== null
        && node.parentNode.tagName !== 'SCRIPT'
        && node.parentNode.tagName !== 'STYLE'
        && !node.parentNode.isContentEditable
    );
}

processNodes(document.body);

Take note of the valid function. This handles three specific cases:

We need to verify that the parent node exists as the node may be removed from the document before processing
Modifying <script> and <style> tags could disrupt functionality or design
Editing a contenteditable element resets the cursor position, leading to a poor user experience

However, the above only covers previously displayed text. To monitor future changes, we can employ MutationObserver to detect newly added or modified text nodes.

const IGNORED = [
    Node.CDATA_SECTION_NODE,
    Node.PROCESSING_INSTRUCTION_NODE,
    Node.COMMENT_NODE,
];
const CONFIG = {subtree: true, childList: true, characterData: true};

const observer = new MutationObserver((mutations, observer) => {    
    observer.disconnect();
    for (const mutation of mutations) {
        const target = mutation.target;
        switch (mutation.type) {
            case 'childList':
                for (const node of mutation.addedNodes) {
                    if (node.nodeType === Node.TEXT_NODE) {
                        if (valid(node)) {
                            node.nodeValue = callback(node.nodeValue);
                        }
                    } else if (!IGNORED.includes(node.nodeType)) {
                        processNodes(node);
                    }
                }
                break;
            case 'characterData':
                if (!IGNORED.includes(target.nodeType) && valid(target)) {
                    target.nodeValue = callback(target.nodeValue);
                }
                break;
        }
    }
    observer.observe(document.body, CONFIG);
});
observer.observe(document.body, CONFIG);

The observer's callback features two main sections: one for childList handling new subtrees and text nodes, and another for characterData managing modified text nodes. The observer must be disabled before making any edits to prevent an infinite loop. Additionally, note the IGNORED array, essential for excluding certain non-user-visible nodes falling under the Text interface.

Combining these methods should cover most scenarios effectively. However, several special cases remain unaddressed:

Specific HTML attributes rendered as text (placeholder in <input>, alt in <img>, value in
```
<input type="button">
```
)
CSS content property
Shadow DOMs

An in-depth explanation of workarounds for these issues is beyond the scope of this StackOverflow response. However, I have developed a free library called TextObserver designed to address them.

Answer 2

Discovering the complexity of achieving optimal performance and functionality in HTML, a supposedly declarative markup language, proved to be challenging. Below, I have outlined my discoveries after a month of extensive testing and experimentation.

To begin replacing existing text efficiently, we will utilize TreeWalker to iterate through every Text node in the document and process their content. In this demonstration, we will censor "heck" with "h*ck".

const callback = text => text.replaceAll(/heck/gi, 'h*ck');

function processNodes(root) {
    const nodes = document.createTreeWalker(
        root, NodeFilter.SHOW_TEXT, { acceptNode:
        node => valid(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
    });
    while (nodes.nextNode()) {
        nodes.currentNode.nodeValue = callback(nodes.currentNode.nodeValue);
    }
}

function valid(node) {
    return (
        node.parentNode !== null
        && node.parentNode.tagName !== 'SCRIPT'
        && node.parentNode.tagName !== 'STYLE'
        && !node.parentNode.isContentEditable
    );
}

processNodes(document.body);

Take note of the valid function. This handles three specific cases:

We need to verify that the parent node exists as the node may be removed from the document before processing
Modifying <script> and <style> tags could disrupt functionality or design
Editing a contenteditable element resets the cursor position, leading to a poor user experience

However, the above only covers previously displayed text. To monitor future changes, we can employ MutationObserver to detect newly added or modified text nodes.

const IGNORED = [
    Node.CDATA_SECTION_NODE,
    Node.PROCESSING_INSTRUCTION_NODE,
    Node.COMMENT_NODE,
];
const CONFIG = {subtree: true, childList: true, characterData: true};

const observer = new MutationObserver((mutations, observer) => {    
    observer.disconnect();
    for (const mutation of mutations) {
        const target = mutation.target;
        switch (mutation.type) {
            case 'childList':
                for (const node of mutation.addedNodes) {
                    if (node.nodeType === Node.TEXT_NODE) {
                        if (valid(node)) {
                            node.nodeValue = callback(node.nodeValue);
                        }
                    } else if (!IGNORED.includes(node.nodeType)) {
                        processNodes(node);
                    }
                }
                break;
            case 'characterData':
                if (!IGNORED.includes(target.nodeType) && valid(target)) {
                    target.nodeValue = callback(target.nodeValue);
                }
                break;
        }
    }
    observer.observe(document.body, CONFIG);
});
observer.observe(document.body, CONFIG);

The observer's callback features two main sections: one for childList handling new subtrees and text nodes, and another for characterData managing modified text nodes. The observer must be disabled before making any edits to prevent an infinite loop. Additionally, note the IGNORED array, essential for excluding certain non-user-visible nodes falling under the Text interface.

Combining these methods should cover most scenarios effectively. However, several special cases remain unaddressed:

Specific HTML attributes rendered as text (placeholder in <input>, alt in <img>, value in
```
<input type="button">
```
)
CSS content property
Shadow DOMs

An in-depth explanation of workarounds for these issues is beyond the scope of this StackOverflow response. However, I have developed a free library called TextObserver designed to address them.

Update the content on a webpage dynamically after the page has loaded

Answer №1

Similar questions

Obtaining data from console.log and showcasing it within a div element

What could be the reason for the selection box in my form not changing the items when togg

Tips for aligning all elements in-line using Bootstrap CSS

How to save multiple identification numbers in localStorage with JavaScript

Drag and release: Place within invalid drop areas

Is your Angular2 form page experiencing reloading issues?

How can you modify the Bootstrap width to activate the responsive design?

How can I navigate and click on a drop-down menu link in Python using Selenium and CSS selectors?

Telerik: Identifying "button" elements within a dropdown list

Is the fixed div not behaving as expected inside a parent with relative positioning?

Is server-side rendering necessary for `browserHistory` in React Router?

data argument cannot accept an array entry - internal server issue

Maintaining a date attribute for scheduling events

Navigating between different route groups using redirection: a step-by-step guide

Technique in CSS/SASS to repair a div

Leverage ajax to trigger php which then executes python code and retrieves the desired outcome

The browser has disregarded a CSS rule

What is the best way to combine limit and fill() in one array?

Issue with sourcemaps not mapping correctly in webpack except when the "entry" is specifically indicated

The timestamps retrieved from Typeorm's find methods are displaying incorrect times