使用 JavaScript 检查元素是否包含特定文本

作者

使用 JavaScript 检查元素是否包含特定文本

Check if an Element contains specific Text using JavaScript

检查元素是否包含特定文本：

  1. 使用textContent元素上的属性获取元素及其后代的文本内容。
  2. 使用该includes()方法检查特定文本是否包含在元素中。
  3. 如果是，则该includes()方法返回true，否则false返回。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="container">
      <p>Apple, Banana, Pear</p>
      <p>Mango, Melon, Apricot</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const container = document.getElementById('container');

if (container.textContent.includes('Melon')) {
  console.log('✅ Melon is contained in element');
} else {
  console.log('⛔️ Melon is NOT contained in element');
}

我们使用textContent属性
获取元素
及其后代的文本内容。

我们使用
String.includes方法来检查元素是否包含特定文本。

该includes()方法执行区分大小写的搜索并检查提供的字符串是否包含在调用它的字符串中。

索引.js
// 👇️ true
console.log('apple'.includes('app'));

// 👇️ false
console.log('apple'.includes('banana'));

检查元素是否包含忽略大小写的特定文本

如果要

对文本是否包含在元素中执行不区分大小写的检查，则必须将元素的文本内容和字符串转换为小写。

索引.js
const container = document.getElementById('container');

const fruit = 'MELON';

if (container.textContent.toLowerCase().includes(fruit.toLowerCase())) {
  console.log('✅ melon is contained in element');
} else {
  console.log('⛔️ melon is NOT contained in element');
}
通过将我们要比较的两个字符串都转换为小写，我们能够执行不区分大小写的比较。

如果元素的文本内容包含特定字符串，我们的if块将运行，否则，else块将运行。