更改整个 HTML 表格中特定单词的颜色

Question

我有一个 HTML 表格，其中在整个表格的各个单元格中都使用了“yes”一词。我想在整个表格中将“是”的颜色更改为绿色。现在我显然可以将所有“是”词放在一个跨度标签中并给它一个类，将一种样式应用于该类，但我必须在每个是的词周围放置一个跨度标签......肯定在那里一定是一种节省空间和精力的方法吗？

Answer 1

只是在 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;
}

Answer 2

如果你使用 jquery，你可以使用类似的东西：

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

仅当“是”或您在字符串中输入的任何内容是该 <td> 的整个 html 内容时才有效

Answer 3

jQuery 拥有美妙的 :contains 选择器：

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

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

Answer 4

实现此目的的唯一方法是将每个单词包装在一个跨度中，并对其应用样式以使颜色变为绿色。您可以使用如下的正则表达式快速找到页面中的所有“是”词：

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

这将找到 html 标记之外的所有“是”字。所以最终的代码是这样的：

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

正则表达式的解释：

中间部分(\byes\b) 匹配作为子表达式的“是”的整个单词。正则表达式的第一位(?<!-) 称为lookbehind，而正则表达式的最后一位(?!([^<]+)?>)(?!-) 称为lookahead。基本上它说找到我所有的单词“yes”，这些单词没有跟在一些非'<' 字符和'>' 之后，并且后面没有连字符。这些外观可防止正则表达式匹配出现在标记或其属性中以及出现在连字符中的任何“是”。 i 和 g 是标志，表示搜索不区分大小写（因此它匹配“是”和“是”），并使搜索全局（匹配字符串中的所有实例）。在替换字符串中，$1 是一个反向引用，表示在此处插入第一个匹配的子表达式，在本例中是匹配字符串中出现的单词“yes”。