Attach an image to any word

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!

I thought that might be true. Thank you. – Toasterdroid Mar 07 '12 at 15:18 — Toasterdroid, Mar 07 '12 at 15:18

alex · Accepted Answer · 2012-03-07T15:28:25.347

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.

edited Mar 07 '12 at 15:28

answered Mar 07 '12 at 14:53

alex

479,566
201
878
984

Hmmm. `$(':contains("Patrick")').addClass('name');` worked, but it added the image to the entire page because the name was found. I need to make it specific to the word itself, so the css will add the image to the left of that word each time it's found. I tried, `$('td:contains("Patrick")').addClass('name');` and that only put it outside the entire table. My corresponding CSS is: `.name { background-image:url(../images/accept.png); background-repeat:no-repeat; background-position:left;` – Toasterdroid Mar 07 '12 at 15:17
@Toasterdroid Try the last example, it works perfect in my fiddle :) – alex Mar 07 '12 at 15:28
Oh cool. Well, I must be putting the script in the wrong place. I'll tinker around with it until I get it to work as your jsFiddle example does. Thanks a lot! – Toasterdroid Mar 07 '12 at 15:37
`:contains()` used to exist in CSS but was dropped for, bah, I'll just point you to this: http://stackoverflow.com/questions/4781141/why-h3nth-child1containsa-selector-doesnt-work/4781167#4781167 One of the main reasons it was dropped is because of disasters like the one described by @Toasterdroid: if you use the pseudo-class alone without any other selectors it will add the class to that `` element **and every single one of its ancestors**, all the way back up to the `` element! – BoltClock Mar 07 '12 at 21:19
If that `` tag is going to be there, you may as well just use `font:contains("Patrick")` and hunt for the right element to add the class to (if not that tag). – BoltClock Mar 07 '12 at 21:21

Attach an image to any word

1 Answers1