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

【问题标题】：Jquery contains text and make it blueJquery 包含文本并使其变为蓝色
【发布时间】：2011-09-17 09:14:48
【问题描述】：

设计者想将公司名称设为蓝色，但公司名称嵌入在文本中，周围没有任何 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>

有人吗？

【问题讨论】：

它甚至不会将第一个 div 设为蓝色，因为它区分大小写。
为什么要使用jQuery？

标签： jquery text contains

【解决方案1】：

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

【讨论】：

将需要更改“公司名称”的大小写以匹配示例 HTML，但逻辑是正确的。

【解决方案2】：

如果您想使用 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/

【讨论】：

这太完美了，太棒了！我不懂魔法，但它有效！
我不确定用 div 包裹是否可以，因为 div 默认是 display: block，只要 span 就可以了
它不会将div 放在任何地方。它将它包装在一个元素中（本例为 div，但它可以是任何元素），并获取该元素的 contents（将 div 排除在外）。检查示例中的输出。

【解决方案3】：

您可以使用jQuery highlight plugin 来实现您的目标。

【讨论】：