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

JavaScript 10月前 110

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

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

以下是本文示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <span id="box">
      <p>One, two, three</p>
      <p>Four, five, six</p>
    </span>

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

这是相关的 JavaScript 代码。

const box = document.getElementById('box');

if (box.textContent.includes('five')) {
  console.log('✅ five is contained in span');
} else {
  console.log('⛔️ five is NOT contained in span');
}

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

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

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

console.log('one'.includes('ne')); // 👉️ true
console.log('one'.includes('two')); // 👉️ false

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

const box = document.getElementById('box');

const word = 'FOUR';

if (box.textContent.toLowerCase().includes(word.toLowerCase())) {
  console.log('✅ four is contained in span');
} else {
  console.log('⛔️ four is NOT contained in span');
}