将图像附加到任何单词

Question

我想将图像附加到特定单词，但无法找到正确的CSS选择器来执行此操作。

我有我的网站的一部分显示数据，因为它从数据库中拉出，所以添加类或id的某些单词不是我的选择。 我需要CSS才能在页面上找到该单词（或本例中名称）的任何位置显示背景图像。

例如，在下面的（这是从数据库中抽取）：

<td class="data1"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Patrick</font></td> 

我想添加其中名称Patrick被发现的背景图像。

我试过的变化，

td[.table1 *='Parick'] { 
    background-image:url(../images/accept.png); 

，但没有得到我的任何地方。由于它不在<span>或<div>甚至链接中，我无法弄清楚。如果您有任何想法或jQuery解决方法，请告诉我。谢谢！

Answer 1

如果你能保证的名字只在元素出现作为唯一的文本节点，你可以使用一个简单的jQuery选择...

$(':contains("Patrick")').addClass('name'); 

jsFiddle。

如果有可能是周围的空白和/或搜索应不区分大小写，尝试...

$('*').filter(function() { 
    return $.trim($(this).text()).toLowerCase() == 'patrick'; 
}).addClass('name'); 

jsFiddle。

如果您需要在任何文本节点发现任何地方的名称，然后你需要一个元素来包装它，尝试...

$('*').contents().filter(function() { 
    return this.nodeType == 3; 
}).each(function() { 
    var node = this; 
    this.data.replace(/\bPatrick\b/i, function(all, offset) { 
     var chunk = node.splitText(offset); 
     chunk.data = chunk.data.substr(all.length); 
     var span = $('<span />', { 
      'class': 'name', 
      text: all 
     }); 
     $(node).after(span); 
    }); 
});​ 

jsFiddle。

我会推荐使用第三个例子。