Jquery содержит текст и делает его синим

Question

Дизайнер хочет сделать название компании синим, но название компании встраивается в текст без какого-либо html-элемента, окружающего его.

Я хочу иметь возможность найти строку и установить только эту строкуна синий

У меня есть этот код, но он делает весь текст синим

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

это пример кода

<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>

Это результат, который я хочу

<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>

Кто-нибудь?

Answer 1

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

Answer 2

Можно сделать это так же, если вы хотите создать span, используя jQuery, а не просто писать <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());       
});

пример: http://jsfiddle.net/niklasvh/Mytzh/

Answer 3

Вы можете использовать плагин выделения jQuery для достижения своей цели.