Question

I’d like to attach images to specific words but cannot find the right CSS selector to do so.

I have a portion of my site which displays data as it’s pulled from a database, so adding classes or id’s to certain words is not an option for me. I need the css to simply display a background image wherever that word (or in this case, name) is found on the page.

For example, in the following (which is pulled from a database):

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

I would like to add a background image where the name Patrick is found.

I tried variations of,

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

but that didn’t get me anywhere. And since it’s not in a <span> or <div> or even a link, I can’t figure it out. If you have any ideas or a jQuery workaround, please let me know. Thanks!

Answer 1

If you can guarantee the names only appear as the only text nodes in elements, you can use a simple jQuery selector…

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

jsFiddle.

If there may be surrounding whitespace and/or the search should be case insensitive, try…

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

jsFiddle.

If you need to find the name anywhere in any text node and then you need to wrap it with an element, try…

$('*').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.

I would recommend using the third example.