从数组中查找包含指定单词的 div 的 class 名称

Question

这是 Google 扩展

我有一组词，我试图将它们与 Twitter 提要上的现有词相匹配。

如果找到匹配项，"exists" 将打印在控制台中。

我试图从我的 spoiled 数组中找到包含指定单词的元素的 class 名称。

我知道它会是 div，因为推文总是放在 div 中，但是我如何在 中找到 class 名称 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");
    }
}

我需要 class 名称的原因是因为我未来的计划是在 div 上放置一个包含数组中单词的图像。

Answer 1

The reason I need the class name is because my future plan is to place an image over the div that contains the words in my array.

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

这意味着您无需使用 innerText，而是需要遍历文档树中的节点，这非常简单。对于，我发布了一个接受谓词函数的通用 "find matching nodes in the DOM" 函数，因此我们可以将它与谓词一起使用，检查元素中的文本节点中的数组中的单词。

您在问题中使用了 Array#every，只有 return true 如果 all 迭代 return编了一个真值；下面我用 Array#some 来标记找到了 any 。包含任何单词的元素会添加一个 class，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 的 class 名称

Find class name of div that contains specified words from an array

javascript

arrays

google-chrome-extension

getelementsbyclassname