js获取元素内的文本（不包含子元素文本）

最新推荐文章于 2024-04-29 23:01:06 发布

程序员的脱发之路

最新推荐文章于 2024-04-29 23:01:06 发布

阅读量640

点赞数 6

分类专栏： JavaScript学习笔记前端社会成长之路文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43845090/article/details/135824176

版权

前端社会成长之路同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

JavaScript学习笔记

39 篇文章 3 订阅

订阅专栏

js获取元素内的文本（不包含子元素文本）

一、需求描述
二、具体实现
三、完整代码

一、需求描述

获取一个元素内的第一层文本，比如将一个div标签作为输入框时，我们可能会在里面插入一些元素，但这些元素只是作为标注使用，并不会作为用户输入的内容，这时候我们就不能获取标注元素内部的内容。

二、具体实现

页面demo：

<div id="text">
  获取的文本pre；
  <p>p标签；<span>span标签</span></p>
  <a href="">a标签；</a>
  获取的文本next；
</div>

默认的innerText会获取所有文本

  const text = document.getElementById('text');
  console.log(text.innerText)

在这里插入图片描述
实现思路：
遍历所有的子节点，判断如果是text节点，就获取节点中的内容，将所有text节点内容拼接就得到了我们要的结果。

  let value = ''
  console.log(text.childNodes)
  text.childNodes.forEach(node => {
    if (node.nodeName === '#text') { // 获取所有text节点的内容
      value += node.data
    }
  })
  console.log(value)

在这里插入图片描述
成功的获取到了内容，因为是我们手动写的html标签，并不是用户输入的内容，默认会带上空格和换行，如果想要去除需要单独处理（如果是用户输入的内容，不建议对换行和空格进行单独处理）

  let value = ''
  text.childNodes.forEach(node => {
    if (node.nodeName === '#text') { // 获取所有text节点的内容
      value += node.data.replaceAll(/\n\s | \r\s/g,"") // 按需处理换行和空格
    }
  })
  console.log(value)

在这里插入图片描述

三、完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="text">
  获取的文本pre；
  <p>p标签；<span>span标签</span></p>
  <a href="">a标签；</a>
  获取的 文本next；
</div>
<script>
  let value = ''
  text.childNodes.forEach(node => {
    if (node.nodeName === '#text') { // 获取所有text节点的内容
      value += node.data
    }
  })
  console.log(value)
</script>
</body>
</html>

程序员的脱发之路

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js获取元素内的文本（不包含子元素文本）

获取一个元素内的第一层文本，比如将一个div标签作为输入框时，我们可能会在里面插入一些元素，但这些元素只是作为标注使用，并不会作为用户输入的内容，这时候我们就不能获取标注元素内部的内容。成功的获取到了内容，因为是我们手动写的html标签，并不是用户输入的内容，默认会带上空格和换行，如果想要去除需要单独处理（如果是用户输入的内容，不建议对换行和空格进行单独处理）遍历所有的子节点，判断如果是text节点，就获取节点中的内容，将所有text节点内容拼接就得到了我们要的结果。// 获取所有text节点的内容。
复制链接

扫一扫