将图像附加到任何单词

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.

我建议使用第三个示例。