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

路丶那么遥远
  • 91
<!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") 里的内容

回复
阅读 868
3 个回答
✓ 已被采纳

原生 js 即可,childNodes 会返回 textNode

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

image.png

解决方案

总结

  • 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>

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

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

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