javascript 更改整个 HTML 表格中特定单词的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10802947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the colour of a specific word throughout an HTML table
提问by DextrousDave
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?
我有一个 HTML 表格，在整个表格的各个单元格中都使用了“是”这个词。我想在整个表格中将“是”的颜色更改为绿色。现在我显然可以把所有的“是”词放在一个跨度标签中并给它一个类，将一个样式应用到这个类中，但我必须去在每个是的词周围放置一个跨度标签......肯定有必须是一种节省空间和精力的方法吗？
回答by Ryan Lynch
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:
这将找到 html 标签之外的所有“是”字样。所以最终的代码应该是这样的：
$('td').each(function(){
$(this).html(
$(this).html()
.replace(
/(?<!-)(\byes\b)(?!([^<]+)?>)(?!-)/ig,
'<span style="color:green;"></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, $1is 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.
中间部分(\byes\b)匹配作为子表达式的“是”的整个单词。正则表达式的第一位(?<!-)称为lookbehind，正则表达式的最后一位(?!([^<]+)?>)(?!-)称为lookahead。基本上它说给我找到所有没有跟在一些非'<'字符和 a之后的“是”的整个单词'>'，并且没有跟在或前面有一个连字符。这些环视可防止正则表达式匹配出现在标签或其属性中以及出现在带连字符的单词中的任何“是”。i 和 g 是标志，表示使搜索不区分大小写（因此它匹配“是”和“是”），并使搜索全局（匹配字符串中的所有实例）。在替换字符串中，$1是一个反向引用，表示在此处插入第一个匹配的子表达式，在这种情况下，它是匹配字符串中出现的单词“yes”。
回答by Fluidbyte
jQuery has the wonderful :contains selector:
jQuery 有很棒的 :contains 选择器：
http://api.jquery.com/contains-selector/
http://api.jquery.com/contains-selector/
$("td:contains('yes')").css("color", "red");
回答by Martin Risell Lilja
Just guessing in JS
只是在 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;
}
回答by CKKiller
If you use jquery you can use something like:
如果您使用 jquery，您可以使用以下内容：
$('#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>
仅当“是”或您在字符串中放入的任何内容是该字符串的整个 html 内容时才有效 <td>
