Chrome 扩展：如果元素包含特定文本，则向元素添加样式

Question

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

如果我只希望包含 w3.org 的链接为粉红色，我如何在 innerHTML 中找到 <a href="http://www.w3.org/1999/xhtml">article < /a> 然后设置单词 "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

虽然在查找初始列表时不能按 non-exact href 值进行过滤，也不能按包含的文本进行过滤，但您可以在事后使用普通 [=17] 过滤列表=]:

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']。

Chrome 扩展：如果元素包含特定文本，则向元素添加样式

Chrome extension: Add style to element if it contains particular text

html

css

dom

google-chrome

innerhtml