how to replace multiple words using javascript replace() function?

Question

here is my code:

        var keys = keyword.split(' ');
        //alert(keys);
        for(var i=0; i<keys.length; i++)
            {
            var re = new RegExp(keys[i], "gi");
            var NewString = oldvar.replace(re, '<span style="background-color:#FFFF00">'+keys[i]+'</span>');
            document.getElementById("wordlist").innerHTML=NewString;
            alert(keys[i]);
            }

but here if I put a string "a b"; its split into two letters "a" and "b" and this replace function replace "a" but when it get "b" it overwrite and only replace "b". but I want to highlight both "a" and "b". how to solve this? I got another problem . If I replace/highlight it then it replace all "a" and "b" of HTML tag. so, how to prevent to replace those html tag. but also when I display the whole text I need all html tag

Richard Dalton · Accepted Answer · 2011-10-14 09:51:21Z

2

You can actually do a single regex replace like this:

var re = new RegExp(keys.join("|"), "gi");
oldvar = oldvar.replace(re, replacer);        
document.getElementById("wordlist").innerHTML = oldvar;

function replacer(str)  
{  
    return '<span style="background-color:#FFFF00">' + str + '</span>';
}

Example - http://jsfiddle.net/zEXrq/1/

What it is doing is merging all keys into a single regex seperated by | which will match all the words then running the replacer function on the matches.

Example 2 - http://jsfiddle.net/zEXrq/2/

edited Oct 14, 2011 at 9:51

answered Oct 14, 2011 at 8:34

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

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

8 Comments

Moumita Over a year ago

if this keys dynamic then this code is not working. and still it replace HTML tag. I want to prevent to replace html tag. please help to solve this

Richard Dalton Over a year ago

@Moumita I don't know what you mean, I've added another example that allows different values to be passed to the function, does this do what you need?

Moumita Over a year ago

I didi this: jsfiddle.net/zEXrq/3 here my string have some html content. and I want to dispaly it with these html content. but also i want to replace only text into those html tag. what i should do?

Moumita Over a year ago

i think I need to check all "<div> <ul> <li id="txtId"><a onclick="word_desc(27); classChange(1, 1);" id="txtid1" class="sel25" >" and "</a></li></ul></div>" using regex but how???

Moumita Over a year ago

check this is my problem: jsfiddle.net/zEXrq/7 I dont want to highlight any html tag,

|

Ivan · Accepted Answer · 2011-10-14 09:00:18Z

2

    var keys = keyword.split(' ');
    //alert(keys);
    for(var i=0; i<keys.length; i++)
        {
        var re = new RegExp(keys[i], "gi");
        oldvar = oldvar.replace(re, '<span style="background-color:#FFFF00">'+keys[i]+'</span>');
        document.getElementById("wordlist").innerHTML=oldvar;
        alert(keys[i]);
        }

Edit: It seems obvious that oldvar is not changed durring the loop always only last replace is applyied. You have to change "oldvar" in order to replace all the words

edited Oct 14, 2011 at 9:00

answered Oct 14, 2011 at 8:32

Ivan

2,2621 gold badge18 silver badges16 bronze badges

Comments

campino2k · Accepted Answer · 2011-10-14 08:34:24Z

1

You should do the Operations on the same var. You take oldvar outside of the loop, but never take the changed content into oldvar. So the last iteration (only) is the one which replaces the content.

answered Oct 14, 2011 at 8:34

campino2k

1,6691 gold badge14 silver badges25 bronze badges

Comments

Gustav Barkefors · Accepted Answer · 2011-10-14 08:35:16Z

0

You're calling replace on the variable oldvar (which is not declared in this snippet) in each iteration and thus starting from the same point - the non-highlighted string - every time. Without having seen all of the code, I would guess that simply replacing var NewString = with oldvar = and .innerHTML=NewString with .innerHTML=oldvar will solve your problem.

answered Oct 14, 2011 at 8:35

Gustav Barkefors

5,0861 gold badge29 silver badges30 bronze badges

Collectives™ on Stack Overflow

how to replace multiple words using javascript replace() function?

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related