up vote 0 down vote favorite

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>
share|improve this question
The thing is I'm trying to make it as generic as possible so it can work for any page. I've edited the post with an example. – jsllsj Apr 26 '12 at 23:20
So you're looking for a more concise way of doing this? – David Englund Apr 26 '12 at 23:31
I'm looking for a way to do it without replacing the entire dom. This seems to break a lot of pages that have any js in it. – jsllsj Apr 26 '12 at 23:37

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
This seems like the only other way to do it. Thanks! – jsllsj Apr 27 '12 at 0:19
@jsllsj - I added a specific tree walking function that should do what you want. – jfriend00 Apr 27 '12 at 0:41
Working version with @jfriend's code here. Replaces occurrences of "iPhone", but does not replace the text inside a javascript function. – David Englund Apr 27 '12 at 19:21

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.