Question

这适用于Google扩展程序

我有一系列单词，我尝试与Twitter Feed上的现有单词匹配。

如果找到匹配项，则在控制台中打印“存在”。

我正在尝试查找包含已损坏的数组中指定字词的元素的类名。

我知道这将是一个div，因为推文总是被放入div中，但如何在纯JavaScript 中找到类名？

//array with all the censor words 
var spoiled = ["terrible", "but", "pasta"];

//checks through every word of array and page
var result = spoiled.every(function(word) {
    return document.documentElement.innerText.indexOf(word) > -1;
});

// Checking page title
if (document.title.indexOf("Twitter") != -1) {

    //checks if every word of array is on page
    if (result) { 
        //if so do this

        console.log("exists");

    } else{
        console.log("not exist");
    }
}

我需要类名的原因是因为我未来的计划是将图像放在包含数组中单词的div上。

Answer 1

我需要类名的原因是因为我未来的计划是将图像放在包含数组中单词的div上。

听起来你想要获得对div的引用，而不是它的类（但是一旦你引用它，如果你真的需要它，你可以从.className得到它的类）

这意味着不是使用innerText，而是需要遍历文档树中的节点，这非常简单。对于this answer，我发布了一个通用的“在DOM中查找匹配节点”函数，它接受谓词函数，因此我们可以将它与谓词一起使用，检查元素中的文本节点是否有数组中的单词。

您在问题中使用了Array#every，如果所有迭代返回了真值，则只返回true;下面我使用Array#some标记了找到任何的内容。包含任何单词的元素会添加一个类highlight，后面会添加一个黄色背景：

// The searcher function
function domFind(element, predicate, results = []) {
  if (!element.children) {
    throw new Error("Starting node must be an element or document");
  }
  if (predicate(element)) {
    results.push(element);
  }
  if (element.children && element.children.length) {
    [...element.children].forEach(child => {
      domFind(child, predicate, results);
    });
  }
  return results;
}
// Our words
let array = ["terrible", "but", "pasta"];
// Do our search with a predicate
let elements = domFind(document, element => {
  return Array.from(element.childNodes).some(n => {
    return n.nodeName.toLowerCase() != "script" &&
           n.nodeType == 3 &&
           array.some(word => n.nodeValue.indexOf(word) != -1);
  });
});
// We have the array of elements; add a class to them
elements.forEach(e => { e.classList.add("highlight"); });

.highlight {
  background-color: yellow;
}

<div>blah blah</div>
<div>this is terrible!</div>
<div>lorem ipsum</div>
<div>
  <div>
    <div>no fate but what we make</div>
  </div>
  <div>la la la</div>
  <div>mmmmmm pasta</div>
</div>
<div>foo</div>

由于这是针对Chrome扩展程序的，我很高兴使用ES2015来实现上述目标。

查找包含数组中指定单词的div的类名

1 个答案: