Question

I want to replace a word that is in html content (not attributes) and I’ve googled and found variant regular expressions, but none of them could not cover all cases.

for example replace “width” to “[width]”

<div style="width: 200px">
    width is 300.
    <div>
        <div style="width: 100px">
            width is 200.
        </div>
    </div>
</div>

to

<div style="width: 200px">
    [width] is 300.
    <div>
        <div style="width: 100px">
            [width] is 200.
        </div>
    </div>
</div>

Thanks in advance

Example Live example

Answer 1

As I already said in my comment, iterate over all text nodes and replace their content.

function replaceText(element, pattern, replacement) {

    for(var child = element.firstChild; child; child = child.nextSibling) {
        if(child.nodeType === 3) {
            child.nodeValue = child.nodeValue.replace(pattern, replacement);
        }
        else if(child.nodeType === 1) {
            replaceText(child, pattern, replacement);
        }
    }

}

Assuming element is a reference to the root:

replaceText(element, /(\b)width(\b)/g, '$1[width]$2');

DEMO

If you haven’t parsed the HTML yet, you can create a temporary element:

var tmp_root = document.createElement('div');
tmp_root.innerHTML = yourHTMLString;

Something similar can be done with jQuery using .contents() ^[docs] to get all child nodes, including text nodes.