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

Question

我有一个HTML表,在整个表中的各个单元格中都使用了"yes".我想在整个表格中将"是"的颜色更改为绿色.现在我显然可以将所有"yes"单词放在span标签中并给它一个类,将一个样式应用到类中,但是我必须在每个单词的周围添加一个span标签...肯定在那里这是一种节省空间和努力的方法吗？

Answer 1

jQuery 有很棒的 :contains 选择器：

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

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

Answer 2

实现此目的的唯一方法是将每个单词包装在一个范围中,并对其应用样式以使颜色变为绿色.您可以使用以下正则表达式快速找到页面中的所有"是"字词:

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

这将找到html标签之外的所有"是"字.所以最终的代码是这样的:

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

正则表达式的解释:

中间部分(\byes\b)匹配作为子表达式的"是"的整个单词.正则表达式的第一位(?<!-)称为lookbehind,正则表达式的最后一位(?!([^<]+)?>)(?!-)称为前瞻.基本上它说找到我所有的全部单词"是",没有遵循一些非'<'字符和a '>',并且没有跟随或前面的连字符.这些外观可以防止正则表达式匹配出现在标记或其属性中的任何"是",并出现在带连字符的单词中.i和g是标志,表示使搜索大小写不敏感(因此它匹配"是"和"是"),并使搜索全局(匹配字符串中的所有实例).在替换字符串中,$1是一个反向引用,它表示在此处插入第一个匹配的子表达式,在这种情况下,匹配字符串中出现的单词"是".