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

您可以使用jQuery highlight plugin来完成目标。

Answer 3

如果您希望使用jQuery创建span而不是直接写<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/

Jquery包含文本并使其变为蓝色

3 个答案: