问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

$(selector).text() 方法返回内容的问题

头像
_XYZ111
    492254176
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.6.0/jquery.js"></script>
        <script type="text/javascript">
            $(function() {
                console.log($("#d1").text())
            })
        </script>
    </head>
    <body>
        <div id="d1">AAA
            <div id="d2">BBB</div>
        </div>
    </body>
</html>

    需求

    通过选择 $("#d1") 获取到示例内容 AAA 但不要取出包含子标签 $("#d2") 里的内容

    javascriptjquery
    阅读 2.8k
    3 个回答
    得票最新
    头像
    XboxYan
      18.2k93790
      ✓ 已被采纳

      原生 js 即可，childNodes 会返回 textNode

      document.getElementById('d1').childNodes[0] // AAA

      image.png

      头像
      _XYZ111
        492254176

        解决方案

        总结

        • Js 和 Jq 不支持调用一个方法就能获取到标签下的直接文本
        • 要获取的话有点麻烦, 可以自己写个方法
        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://localhost:8000/library/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            // 使用原生js的方式
            function getText1(el) {
                return el.childNodes[0].nodeValue
            }

            // 使用Jq的方式
            function getText2(el) {
                return el.clone().children().remove().end().text()
            }

            $(function() {
                const text1 = getText1(document.getElementById("d1"))
                const text2 = getText2($("#d1"))
                // 如果标签文本后有空格, 也会被获取到, 不要的话可以去除
                console.log(text1.trim())
                console.log(text2.trim())
            })
        </script>
    </head>
    <body>
        <div id="d1">AAA
            <div id="d2">BBB</div>
        </div>
    </body>
</html>

        头像
        边城
          59.8k157274
          [...$(selector).get(0).childNodes]
    .filter(node => node.nodeType === 3)  // 把 text 节点找出来
    .map(node => node.nodeValue)          // 把文本找出来
    .join("");                            // 把所有文本连接起来

          子节前空后会有空白（空格、空行等），所以根据需求可能需要进行处理。一个是看 join() 的时候用什么分隔符（或不要分隔符），二个是在 join() 前看要不要过滤掉空白字符串，第三是看 join() 后不要 trim() 掉前后空白。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题