Using jQuery replace and regex to replace string

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>

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
– jsllsj, Commented Apr 26, 2012 at 23:20
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
– jsllsj, Commented Apr 26, 2012 at 23:37

Community · Accepted Answer · 2017-05-23 12:21:17Z

3

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.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Apr 26, 2012 at 23:39

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jsllsj Over a year ago

This seems like the only other way to do it. Thanks!

jfriend00 Over a year ago

@jsllsj - I added a specific tree walking function that should do what you want.

Logical Fallacy Over a year ago

Working version with @jfriend's code here. Replaces occurrences of "iPhone", but does not replace the text inside a javascript function.

Collectives™ on Stack Overflow

Using jQuery replace and regex to replace string

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related