如何使用jQuery选取HTML节点文本?仅获取父元素内非子元素文本
嘿,刚好碰到过类似的问题,我来给你拆解一下!
一、jQuery选取HTML节点文本内容的常用方法
平时用jQuery获取文本,常用这几种方式:
text()方法:这是最常用的,它会把目标元素及其所有后代元素的文本内容全部拼接成一个字符串返回,不过这也是你这次遇到问题的原因~html()方法:如果需要获取包含HTML标签的内容,可以用这个,但它返回的是元素的innerHTML,不是纯文本。- 精准选取子节点文本:如果要定位特定的文本节点,就得结合DOM节点的属性或者jQuery的节点筛选方法来操作了。
二、解决你的特定需求:仅获取
<p class="a">里的"some text" 你用$('p.a').text()拿到全部文本,是因为这个方法会遍历p标签下的所有子元素(包括那个a标签),把所有文本都合并了。要单独拿到p标签本身的"some text",给你几个靠谱的方法:
方法1:直接操作原生DOM节点(简单高效)
// 先拿到原生的p DOM元素,再取第一个文本节点的内容 var targetText = $('p.a')[0].firstChild.textContent.trim(); console.log(targetText); // 输出 "some text"
这里$('p.a')[0]把jQuery对象转成了原生的DOM元素,firstChild就是p标签里的第一个子节点(也就是我们要的文本节点),textContent获取它的文本,trim()是为了去掉文本前后可能的空格,让结果更干净。
方法2:用jQuery的contents()筛选文本节点
var targetText = $('p.a').contents().filter(function() { // nodeType为3代表是文本节点,筛选出这类节点 return this.nodeType === 3; }).first().text().trim(); console.log(targetText); // 输出 "some text"
contents()方法会返回元素的所有子节点(包括文本、注释、标签节点),我们用filter()挑出文本节点,再取第一个就是我们要的内容,最后用text()提取并去空格。
方法3:字符串截取(不推荐,仅适用于结构固定的情况)
如果你的HTML结构永远不会变,也可以先拿到全部文本再截取,但这种方法不够灵活,一旦结构改动就失效了:
var fullText = $('p.a').text(); var targetText = fullText.split('some other text')[0].trim(); console.log(targetText); // 输出 "some text"
内容的提问来源于stack exchange,提问作者darkrose1977




