Find and Replace HTML Strings. Ignore URLs

Question

I have written a basic script to search the DOM for strings and replace. But in it's current state, it will affect URLs of links too.

For example replacing "example" with "my example" would break the following example;

<a href="http://my example.com/my example">My Example</a>

How could I stop this for happening, so the result would in fact return like this?

<a href="http://example.com/example">My Example</a>

Is there a way to automatically account for CAPs or would this require a separate search string?

Here is my code;

$(document).ready(function(){

    $("body").children().each(function() {           

        $(this).html($(this).html().replace(/example/g,"my example"));

    })

});

There will be approximately 80 words to find/replace, from a perfromace point of view, is there a better method of handling this? Short of separate pages per languages of course.

BarthesSimpson · Accepted Answer · 2016-02-15 20:07:33Z

3

If you use .text() instead of .html() it will not change the hrefs.

$(document).ready(function(){
    $("body").children().each(function() {           
        $(this).text($(this).text().replace(/example/g,"my example"));
    });
});

UPDATE: I should add that this may cause unintended side effects as currently written. I would suggest restricting the .replace operation to atomic elements as follows:

$(document).ready(function() {
    replaceText($("body"));

    function replaceText(object) {
        var children = object.children();
        if (children.length > 0) {
            children.each(function() {
                replaceText($(this));
            });
        } else {
            object.text(object.text().replace(/example/g, "my example"));
        };
    };
});

UPDATE: Here is an alternative approach that works for free-floating text nodes.

$(document).ready(function() {
    replaceText($("body"));

    function replaceText(object) {

        //first we handle text nodes inside the element itself
        handleTextNodes(object); 

        //then we iterate down into the child elements 
        var children = object.children();
        children.each(function() {
            replaceText($(this));
        });
    };

    function handleTextNodes(object) {
        object.contents().filter(function() {
            return this.nodeType == 3;
        }).each(function() {
            textNodeReplace(this);
        });
    };

    function textNodeReplace(node) {
        var text = node.nodeValue;
        node.nodeValue = text.replace(/example/g, "my example");
    };
});

edited Feb 15, 2016 at 20:07

answered Feb 13, 2016 at 0:01

BarthesSimpson

96910 silver badges21 bronze badges

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

7 Comments

user1235285 Over a year ago

Thanks for the quick reply. Using this code, I get an error... Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

BarthesSimpson Over a year ago

Oops - I had forgotten to update the last line. Should work now.

user1235285 Over a year ago

Perfect! Works a treat! Thank you so much!

user1235285 Over a year ago

Actually, just noticed this method only replaces the first instance in each of the children. Any ideas how to get it to target all instances within a particular child?

BarthesSimpson Over a year ago

It should work for all instances, but will not work for text nodes (i.e. text that is free-floating inside a div). So that may be the issue. If so, I've added an alternative approach.

|

Collectives™ on Stack Overflow

Find and Replace HTML Strings. Ignore URLs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related