Changing the colour of a specific word throughout an HTML table

Question

I have an HTML table with the word "yes" being used in various cells throughout the table. I want to change the color of "yes" to green throughout the table. Now I could obviously put all the "yes" words in a span tag and give it a class, applying a style to the class, but I'd have to go and put a span tag around every single yes word...surely there must be a way of saving space and effort in doing this?

Is "yes" the only word? i.e. `yes`? That could be done using JavaScript DOM traversal + CSS. — Widor, May 29 '12 at 16:21
See http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery — Stefan, May 29 '12 at 16:22
If yes is the only thing in a container, then just apply the style to the container. If it's part of a longer string then your ONLY option is to wrap it in a span, which becomes the new container. — Marc B, May 29 '12 at 16:23
Thanks Everyone, I guess the easiest would be to just wrap all the yes text in a span tag and apply the class to it — DextrousDave, May 30 '12 at 19:18
Make sure you accept the answer that works best for you (not necessarily mine ;-). — Ryan Lynch, May 30 '12 at 21:27

score 6 · Answer 1 · answered May 29 '12 at 16:24

6

jQuery has the wonderful :contains selector:

http://api.jquery.com/contains-selector/

$("td:contains('yes')").css("color", "red");

answered May 29 '12 at 16:24

Fluidbyte

5,162
9
47
76

Will color every text in `td` – Jashwant May 29 '12 at 16:46
And it should be green not red. ;-) – Ryan Lynch May 29 '12 at 17:06
worked with `$("td:contains('yes')").css("color", "blueviolet");` after ``. before ``, it does not work.
– noobninja Dec 26 '15 at 05:44

score 6 · Answer 2 · edited Mar 10 '14 at 12:06

6

The only way to accomplish this is to wrap each word in a span, and apply a style to it to make the color green. You can quickly find all of the "yes" words in your page with a regex like this:

 /(?<!-)(\byes\b)(?!([^<]+)?>)(?!-)/ig

This will find all the "yes" words outside of html tags. So the final code would be something like this:

$('td').each(function(){
   $(this).html(
        $(this).html()
       .replace(
              /(?<!-)(\byes\b)(?!([^<]+)?>)(?!-)/ig, 
             '<span style="color:green;">$1</span>'
        )
    );
});

Explanation of the regex:

The middle part, (\byes\b), matches whole words that are "yes" as a sub-expression. The first bit of the regex, (?<!-) is called a lookbehind, and the last bit of the regex, (?!([^<]+)?>)(?!-) is called a lookahead. Basically it says find me all the whole words "yes" that aren't followed some non '<' characters and a '>', and are not followed or preceeded by a hyphen. These lookarounds prevents the regex from matching any "yes"'s that appear within a tag or its attributes, and that appear in hyphenated words. The i and g are flags that say make the search case insensitive (so it matches "Yes" and "yes"), and make the search global (match all instances in a string). In the replace string, $1 is a backreference, that says insert the first matched sub-expression here, which in this case is the word "yes" as it appears in the matched string.

edited Mar 10 '14 at 12:06

entryton

280
5
18

answered May 29 '12 at 16:26

Ryan Lynch

7,676
1
24
33

and if your HTML happens to contain a tag with "yes" in its attributes? – Alnitak May 29 '12 at 16:26
Try it, this regex will ignore those. – Ryan Lynch May 29 '12 at 16:28
Can you explain the regex ? It would be very helpful to a beginner like me. And what does `$1` do ? Works fine for `yesterday` but not with `yes-terday` – Jashwant May 29 '12 at 16:50
It shouldn't match yesterday or yes-terday. Try it out on rubular.com and see if you are getting that issue. I've added an explanation to my answer, hope that helps. – Ryan Lynch May 29 '12 at 17:06
Ah, you're right, it does fail for yes-terday. The \b will match hyphens. – Ryan Lynch May 29 '12 at 17:41
Right, so I added a lookbehind and lookahead to prevent matches within hyphenated words. – Ryan Lynch May 29 '12 at 18:05
Wow, thanks for such a wonderful explanation. +1. Any suggestion for an easy regex reference ? – Jashwant May 29 '12 at 19:08
http://www.regular-expressions.info/ is a great reference. It has all the usual reference tables, plus tutorials and real world examples. I use http://www.rubular.com alot as well to test out my regular expressions prior to coding them, since it gives me realtime feedback as I type. – Ryan Lynch May 29 '12 at 19:21

Martin Risell Lilja · Answer 3 · 2012-05-29T17:06:29.627

3

Just guessing in JS

var tables = document.getElementsByTagName('td');
for(var i = 0; i < tables.length; i++)
{
    var s = tables[i].innerHTML;
    s = s.replace('yes', '<span style="color:green">yes</span>');
    tables[i].innerHTML = s;
}

edited May 29 '12 at 17:06

answered May 29 '12 at 16:23

Martin Risell Lilja

617
5
10

1

I think you would still need to put `s` back into the innerHTML for this to work. something like `tables[i].innerHTML = tables[i].innerHTML.replace('yes', 'yes');` – Kyeotic May 29 '12 at 16:26
@Tyrsius Thank you, I was thinking of it as a pointer to the inner html i guess :D – Martin Risell Lilja May 29 '12 at 16:32
1

This will also replace yes if it appears within a tag, for example in a class attribute. – Ryan Lynch May 29 '12 at 16:37

score 0 · Answer 4 · answered May 29 '12 at 16:24

If you use jquery you can use something like:

$('#tableID')
  .find('td')
    .each(function () {
      if ($(this).html() == 'yes') {
        $(this).addClass('MyClass');
      }
    });

will only work if 'yes' or whatever you put in the string is the entire html content of that <td>

Changing the colour of a specific word throughout an HTML table

4 Answers4