Need help on applying styling by Javascript code

Question

I want to apply style(blue font) for the matching words in a particular string which may have more than one words. This string can have same word repeated as well.

Ex: String paragraph = "This is the string which will be matched against substring. The matching substring can be a single word or multple words composed string. "

String matchingString = 'string word'

Now i want to apply blue bold style to the matching words of both string and word in paragraph string.

Would you please help me out how to do this by javascript?

Advance thanks Robert.

on the "string paragraph text" there's no match for "string word". Anyway, just replace the word by <span class=blue>word</span>. Look at: w3schools.com/jsref/jsref_replace.asp — Pedro L.
– Pedro L., Commented Jul 28, 2012 at 12:51

Engineer · Accepted Answer · 2012-07-28 14:45:49Z

1

Suppose:

<div id="myDiv">This is the string which will be matched against substring. The matching substring can be a single word or multple words composed string.</div>

.some-class{
    color: blue;
    font-weight: bold;
}

then you could do like this to replace the words:

var elem = document.getElementById('myDiv');
var phrase = 'string word';
var regex = new RegExp(phrase.split(' ').join('|'),"gi");
//result   =>    /string|word/g
elem.innerHTML = elem.innerHTML.replace(regex,'<span class="some-class">$&</span>');

Live demo

edited Jul 28, 2012 at 14:45

answered Jul 28, 2012 at 13:00

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

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

3 Comments

Robo Over a year ago

This works perfectly for case-insensitive by adding i in regexp. Thank you very much Engineeeeeeeeer...:)

Engineer Over a year ago

@Robo You have not mentioned anything about case sensitivity, so I have provided the answer without i flag.However I have added i, and probably you can accept my answer.

Robo Over a year ago

Hi Engineer, Need one more favour on top of above solution... if i give var phrase = 'string word' (I have given extra space between words). after this word is not getting matched. Would you share any idea?

Aletheios · Accepted Answer · 2012-07-28 12:58:27Z

0

var text = "This is the string which will be matched against substring...";
var search = "string word";

var words = search.split(" ");
for (var i = 0; i < words.length; ++i) {
    text = text.replace(words[i], "<span style='color: blue;'>"+words[i]+"</span>");
}

document.write(text);

Test it here: http://jsfiddle.net/Zh6t9/

answered Jul 28, 2012 at 12:58

Aletheios

4,0202 gold badges36 silver badges48 bronze badges

3 Comments

Robo Over a year ago

Would you give an idea to match string in substring? and case insensitive.

Aletheios Over a year ago

If you want case insensitive substring matching, @Engineer's solution is the right way to go... ;) Just replace "g" with "gi" in the regex.

Robo Over a year ago

Again if i add style in the paragraph string, it's messing up as below

Collectives™ on Stack Overflow

Need help on applying styling by Javascript code

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related