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

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2022/08/17 浏览次数：

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

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

这是本文中示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <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 代码。

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

if (container.textContent.includes('Jiyik')) {
  console.log('✅ Jiyik 包含在元素中');
} else {
  console.log('⛔️ Jiyik 不包含在元素中');
}

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

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

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

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

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

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

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

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

const fruit = 'JIYIK';

if (container.textContent.toLowerCase().includes(fruit.toLowerCase())) {
  console.log('✅ jiyik 包含在元素中');
} else {
  console.log('⛔️ Jiyik 不包含在元素中');
}

通过将我们要比较的两个字符串都转换为小写，我们能够执行不区分大小写的比较。

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

上一篇：JavaScript 修复 XMLHttpRequest is not defined 错误

下一篇：Javascript 中 RangeError: Maximum call stack size exceeded 错误

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.