Replace with regExp in javascript

Question

I have a problem with replace like this:

I have an array test :

test: Object
    boolean: "true"
    integer: "0"
    values|+|0: "option_1"
    values|+|1: "option_2"

and then i do parse like this:

for(var data in test){
   for(var input in test[data]){
   var input_aux = input.split('|+|');
   if(input != ''){
      $('table#'+table_id+' tbody td.'+input_aux[0]+' small').each(function(){ 
       var text_highlighted = $(this).text().replace(new RegExp('(' + test[table][input] + ')', 'gi'), '<b>$1<\/b>');
      $(this).html(text_highlighted);
    }}}

what i'm trying to accomplish is to match the data from the array like option_1 that is in that table exactly option_1 and change the html of it to option_1.

And it's working fine my problem is like when i have the same key but different value like in the example above, it will highlight only option_2 and can't understand why, any idea?

you may have to replace test[table][data] by test[data][input] ? — karkael
– karkael, Commented Apr 7, 2015 at 14:07
@stribizhev, please go in details, just to mention it's working fine for integer and any other single keys, thanks! — Abude
– Abude, Commented Apr 7, 2015 at 14:07
Do you mean my hint was enough to solve the issue? Changing replacement string from $1<\/b> to $1? — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Apr 7, 2015 at 14:13
@epascarello no , they are in different td > small but the td's are with the same id like td[class="values"] — Abude
– Abude, Commented Apr 7, 2015 at 14:15

epascarello · Accepted Answer · 2015-04-07 14:22:15Z

1

The issue is the fact you are doing replacements even if there is no match. So you are reading the text() of all the elements and replacing it with that text. So you wipe out all of the existing html.

So check to see if there is a match before you do the replacement.

var re = new RegExp('(' + test[table][input] + ')', 'gi');
var txt = $(this).text();
if (txt.match(re)) {
    var text_highlighted = txt.replace(re, '<b>$1<\/b>');
    $(this).html(text_highlighted);
}

other option would be to use contains selector.

edited Apr 7, 2015 at 14:22

answered Apr 7, 2015 at 14:17

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

8 Comments

Abude Over a year ago

i'm reading only the $('table#'+table_id+' tbody td.'+input_aux[0]+' small'), so just the td's that have class included in the key of the array, is that an issue? i'm not reading all the table

epascarello Over a year ago

This is your problem.

Abude Over a year ago

can you please give me more details, i really don't get my problem in the approach, sorry

epascarello Over a year ago

You replace every element you loop through with the text(). The text() removes all the html in that element so you blow away the previous match!

Abude Over a year ago

@ epascarello --- Amazing answer, i wasn't really sure that somebody will understand what i wrote in the question, but you got the issue and save the situation, Thanks man! worked like a charm.

|

Collectives™ on Stack Overflow

Replace with regExp in javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related