How to find certain text with jQuery and style them

Question

I confused and i need your help how? If

<pre>Lorem Ipsum Dolor Sir amet</pre>

and i want the "ipsum" text colored yellow.

possible duplicate of [Highlight a word with jQuery](http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery) — Yeronimo, Aug 30 '13 at 13:43
you can't highlight a text node, you need to wrap it in another element like `span` — Arun P Johny, Aug 30 '13 at 13:46
Also see [if text contains '@' change color of '@'](http://stackoverflow.com/questions/17191076/if-text-contains-change-color-of) — Xotic750, Aug 30 '13 at 13:50
I guess this could help you buddy .http://stackoverflow.com/questions/7263239/coloring-a-substring-in-a-label — dreamweiver, Aug 30 '13 at 13:52

Suresh Atta · Answer 1 · 2013-08-30T13:51:05.340

3

Try to create a span tag and wrap your content in that.

$('pre:contains(Ipsum )').each(function(){
  $(this).html(
    $(this).html().replace('Ipsum ','<span class="colorClass">  Ipsum  </span>')
  );
});

Working Demo

edited Aug 30 '13 at 13:51

answered Aug 30 '13 at 13:45

Suresh Atta

120,458
37
198
307

1

@downvoter can you please explain,why that downvote? – Suresh Atta Aug 30 '13 at 13:48
1

I've upvoted all three great answers to offset mystery downvoter – KyleMit Aug 30 '13 at 13:57

score 2 · Answer 2 · answered Aug 30 '13 at 13:47

2

you can't highlight a text node, you need to wrap it in another element like span then use it to apply the highlight

$('pre').html(function(idx, html){
    return html.replace(/(Ipsum)/, '<span class="highlight">$1</span>')
})

Demo: Fiddle

answered Aug 30 '13 at 13:47

Arun P Johny

384,651
66
527
531

1

@downvoter anything I missed – Arun P Johny Aug 30 '13 at 13:49
1

I've upvoted all three great answers to offset mystery downvoter – KyleMit Aug 30 '13 at 14:00

kunalbhat · Answer 3 · 2013-08-30T13:50:02.360

1

Run a little replace function to programmatically isolate your target word, in this case the second word. You could also substitute this for a hardcoded value should you always know what word you are targeting.

HTML

<pre>Lorem Ipsum Dolor Sir amet</pre>

CSS

span { background: yellow; }

jQuery

$('pre').html(function(i, word) {
  return word.replace(/\s(.*?)\s/, ' <span>$1</span> ');
});

Codepen example

edited Aug 30 '13 at 13:50

answered Aug 30 '13 at 13:44

kunalbhat

1,709
10
11

1

If you downvote please example why. Are you a troll? I believe so. – kunalbhat Aug 30 '13 at 13:50
1

I've upvoted all three great answers to offset mystery downvoter – KyleMit Aug 30 '13 at 14:01

How to find certain text with jQuery and style them

3 Answers3