Question

I’m currently using the .replace function to replace a specific string on the page. Given that I don’t know where the current string is located so I can’t select it, my code looks something like this:

$('body').html( $('body').html().replace(regex, 'sometext') );

So if the page originally looked like this:

<div class="a">Hello</div>

It now looks like this:

<div class="a">sometext</div>

Is there a way to do it without using $('body').html( $('body').html().replace() ) ?

Thanks!

Edit: example

<p class="last">Mac, iPhone, iPod and iPad customers within 90 days of ownership are eligible for complimentary phone support — one support incident per iPod and unlimited incidents per Mac, iPhone and iPad. <a href="/support/" onclick="s_objectID=&quot;http://www.apple.com/support/_3&quot;;return this.s_oc?this.s_oc(e):true">Online technical support</a> for Apple products is available beyond the initial 90 days.</p>

Using this:

$('body').html( $('body').html().replace("iPhone", '<a href="#">iPhone</a>') );

It will replace each instance of iPhone so that it’ll look like iPhone

Resulting in:

<p class="last">Mac, <a href="#">iPhone</a>, iPod and iPad customers within 90 days of ownership are eligible for complimentary phone support — one support incident per iPod and unlimited incidents per Mac, <a href="#">iPhone</a> and iPad. <a href="/support/" onclick="s_objectID=&quot;http://www.apple.com/support/_3&quot;;return this.s_oc?this.s_oc(e):true">Online technical support</a> for Apple products is available beyond the initial 90 days.</p>

Answer 1

You can walk the DOM hierarchy, node by node, checking for text nodes and then comparing the text in each individual text node. That would eliminate the type of breakage that your current code can cause. It would avoid breaking all event handlers like your current code does.

FYI, here’s a modification of a different function I wrote for a different answer that would do what you want:

function replaceTextInDomTree(root, searchRegEx, replace) {
    var node = root.firstChild;
    while(node) {
        if (node.nodeType == 3) {
            if (searchRegEx.test(node.nodeValue)) {
                // we do the test first to avoid setting 
                // nodeValue when there's no change
                // to perhaps save the browser some layout time
                // since we'd be operating on every single text node
                node.nodeValue = node.nodeValue.replace(searchRegEx, replace);
            }
        }
        if (node.hasChildNodes()) {
            // go down into the children
            node = node.firstChild;
        } else {
            while (!node.nextSibling) {
                node = node.parentNode;
                if (node == root) {
                    return;
                }
            }
            node = node.nextSibling;
        }
    }
}

Notes:

1) This will replace text in a contiguous text block only with no HTML tags in it.

2) If you want multiple replaces in the same text node, then make sure to put the g flag the regex you pass in.