JQuery contains text and makes it blue

Question

The designer wants to make the company name blue, but the company name is inserted into the text without any html element surrounding it.

I want to find the line and set only this line to blue

I have this code, but it makes all the text blue

$(function() { $('div:contains("The Company Name")').css("color","blue"); }); 

this is sample code

 <div>The company name is great and makes a lot of happy customers</div> <div>You can have more info on <a href="link">The company name</a>[...]</div> 

As a result i want

 <div><span style="color:blue;">The company name</span> is great and makes a lot of happy customers</div> <div>You can have more info on <a href="link"><span style="color:blue;">The company name</span></a>[...]</div> 

Is anyone

Answer 1

Can it do the same if you want to create a span using jQuery and not just write <span style="color:blue;">etc... :

 var s = "The company name"; $('div:contains("'+s+'")').html(function(i,e){ var p = new RegExp(s,"g"); return e.replace(p,$('<span />').css('color','blue').text(s).wrap('<div />').parent().html()); }); 

example: http://jsfiddle.net/niklasvh/Mytzh/

Answer 2

  $(function() { $('div').each(function() { $(this).html($(this).html().toString().replace('The Company Name', '<span style="color: blue">The Company Name</span>')); }); }); 

Answer 3

You can use jQuery highlight plugin to achieve your goal.