javascript - 如何根据内容选择 HTML 元素内的文本？

Question

我想查找网站内的列表或数组中有多少产品。我想要的那个叫Course这是 <strong > 中的文本元素。

我可以全部选择它们，但我如何才能只过滤带有 COURSE 一词的那些？我正在浏览器中使用开发工具。

代码如下:

我为类 var e = document.querySelectorAll('.card-type'); 使用了一个选择器

`[<strong class=​"card-type">​Workshop​</strong>​, 
 <strong class=​"card-type">​Course​</strong>​, 
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Workshop​</strong>​, 
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Course​</strong>​, 
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​, 
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​ ​]` 

Answer 1

使用 filter 过滤您的列表.

let courses = e.filter(item => item.textContent === "Course");

这是使用 let 和 fat arrow syntax aka lambda，它们是 ES6 语法。如果你想要 ES5 JavaScript，只需使用 var 和一个普通的匿名函数。

var courses = e.filter(function(item) {
    return item.textContent === "Course";
});

编辑:Kevin B 发现我的函数将是未定义的，他是对的。这是因为 e 是一个 NodeList 而不是数组。我们必须转换它!有多种方法可以将 NodeList 转换为数组。最简单的是 splice。或者你也可以使用 spread 语法 [...e].filter 或 Array.from() ，它们都是还有 ES6 特性。