Replace content of each HTML controls javascript jquery

Question

I'm trying again to replace each text content of each control in a page using javascript and jquery.

I need to search in each text content (WITHOUT MODIFING TAGS, ONLY THE TEXT) any word and replace it with another any word.

One try is:

jQuery.fn.replaceEachOne = function (objective, rep) {
   this.each( function(){ 
                //$(this).html( $(this).html().replace( new RegExp('(\\s'+objective+'\\s(?![[\\w\\s?&.\\/;#~%"=-]*>]))', "ig"), rep) );
    $(this).html( $(this).html().replace( new RegExp('('+objective+'(?![[\\w\\s?&.\\/;#~%"=-]*>]))', "ig"), rep) );
            }
        );
}

Please help!!

lonesomeday · Accepted Answer · 2011-01-19 14:02:12Z

1

Something like this should do the trick:

$.fn.replaceEachOne = function(search, replace) {
    this.contents().each(function(){
        if (this.nodeType == Node.ELEMENT_NODE) {
            $(this).replaceEachOne(search, replace);
        } else if (this.nodeType == Node.TEXT_NODE) {
            this.nodeValue = this.nodeValue.replace(search, replace);
        }
    });
};

This does the replacement on text nodes directly, rather than modifying the HTML of an entire element. Note that it is case-sensitive. You'd need to change the call to replace to use a regular expression if you want a case-insensitive search.

answered Jan 19, 2011 at 14:02

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

2 Comments

Daniel Gomez Rico Over a year ago

Thats work, but I have to add a new control to the finded text, I mean add: <label Color="..."> Finded Text </label> and if I do it in that way the browser dont recognize it as control, only as text, I mean, it apears textually <label Color="..."> Finded Text </label> not a Cool label with a diferent color... :( help!!

lonesomeday Over a year ago

@Daniel G.R. Sounds like you need a highlighting plugin.

Marcin Pieciukiewicz · Accepted Answer · 2011-01-19 15:11:10Z

0

I would start by something like this:

jQuery.fn.replaceEachOne = function(objective, rep) {
    var html = jQuery(this).html();
    var simpleRegexp = new RegExp(objective, "gi");
    var regexp = new RegExp(">[^><]*?"+objective+"[^><]*?<","gi");
    html = html.replace(regexp, function(match) {
        return match.replace(simpleRegexp, rep);
    });
    jQuery(this).html(html);
}

That code finds the matching text in body html code beetween '>' and '<' characters and then replaces matched text.

Of course this is simple solution and it will replace text also in <script> or <style> blocks. By I think it is a good idea to start with.

edited Jan 19, 2011 at 15:11

answered Jan 19, 2011 at 14:39

Marcin Pieciukiewicz

2542 silver badges9 bronze badges

4 Comments

Daniel Gomez Rico Over a year ago

But the problem is that I dont want to add content into the <> I need to add content in <> HERE </>

Marcin Pieciukiewicz Over a year ago

I've wrote "beetween '>' and '<'", not "beetween '<' and '>'". The order is important.

Marcin Pieciukiewicz Over a year ago

Edit info: I've replaced "body" by this.

Marcin Pieciukiewicz Over a year ago

I've tried that: jQuery("body").replaceEachOne("jquery", "<label style='color:red'>jquery</label>"); on jQuery.org and it chenged color of all jquery occurences on that page.

Pang · Accepted Answer · 2017-05-04 04:23:52Z

0

Finally...

jQuery.fn.replaceEachOne = function (objective, reposition) {
    this.contents().each(function(){
        if (this.nodeType == Node.ELEMENT_NODE) {
            $(this).replaceEachOne(objective, reposition);
        } else if (this.nodeType == Node.TEXT_NODE) {
            var label = document.createElement("label");
            label.innerHTML = this.nodeValue.replace(objective, reposition);
            this.parentNode.insertBefore(label, this);
            this.parentNode.removeChild(this);
        }
    }); 
}

edited May 4, 2017 at 4:23

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jan 19, 2011 at 15:23

Daniel Gomez Rico

16k22 gold badges100 silver badges174 bronze badges

Collectives™ on Stack Overflow

Replace content of each HTML controls javascript jquery

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related