迹忆客 专注技术分享

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

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

作者:迹忆客 最近更新:2023/01/19 浏览次数:

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

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

以下是本文示例的 HTML。

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

  <body>
    <div id="box">
      <p>Hello world</p>
      <p>One, two, three</p>
    </div>

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

这是相关的 JavaScript 代码。

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

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

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

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

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

console.log('hello'.includes('lo')); // 👉️ true
console.log('hello'.includes('test')); // 👉️ false

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

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

const word = 'WORLD';

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

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

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

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

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便