將圖像附加到任何單詞

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。

我會推薦使用第三個例子。