html - Chrome 扩展 : Add style to element if it contains particular text

Question

我只想为包含特定字符串的元素添加样式。即 if(el 包含 str) {el:style}。

如果我只希望包含 w3.org 的链接为粉红色，我将如何找到 <a href="http://www.w3.org/1999/xhtml">article < /a>在 innerHTML 中，然后在页面上设置单词“article”的样式。

到目前为止，我可以将所有链接变成粉红色，但我无法有选择地定位包含“www.w3.org”的链接。

var links = [...document.body.getElementsByTagName("a")];
for (var i = 0; i < links.length; i++) {
  links[i].style["color"] = "#FF00FF";
}

我如何将其仅应用于包含字符串“w3.org”的元素？

一开始我以为这会很简单!感谢您提供任何帮助。

Answer 1

虽然在查找初始列表时不能按不精确的 href 值进行过滤，也不能按包含的文本进行过滤，但您可以使用纯 javascript 在事后过滤列表:

var links = [...document.body.getElementsByTagName("a")];
for (var i = 0; i < links.length; i++) {
  if (links[i]['href'].indexOf('www.w3.org') == -1) { continue };
  links[i].style["color"] = "#FF00FF";
}

假设您想按 href 进行过滤，即。如果您指的是文字文本，则应改用 links[i]['text']。