元素文本过滤

只获取元素中的文本,而不获取子元素的文本

<div id="content">文本内容<span>插入span标签</span>测试<b>插入b标签</b></div>

假如以上面的代码为例，我只需要获取“文本内容测试”这部分文字的话。

最开始我想到的就是使用原生写法获取文本节点。而用jquery获取文本text()、html() 都得不到想要的结果。

查看网上的资料整合了几种方法，在此做个记录：

原生JavaScript方法

//原生js方法

var arr = [];

var content = document.getElementById("content");

for (var i = 0, len = content.childNodes.length; i < len; i++) {

　　 if(content.childNodes[i].nodeType === 3){

　　　　// 通过nodeType是不是文本节点来判断

　　　　//console.log(content.childNodes[i].nodeValue);

　　　   arr.push(content.childNodes[i].nodeValue);

　　 }

}

var str = arr.join("");

console.log(str) // 文本内容测试

 

jquery的方法一：

获取div的所有子元素和文本；再移除子元素。

var obj = $("#content").clone();

obj.find(':nth-child(n)').remove();

console.log(obj.text()); //文本内容测试 //或者是利用children()方法获取元素的所有子元素的集合；此方法结果也一样 //end()将匹配的元素变为前一次的状态 $("#content").clone().children().remove().end().text() //文本内容测试

jquery的方法二：

使用filter()过滤方法

//contents() 查找匹配元素内部所有的子节点（包括文本节点）

var contStr = $('#content').contents().filter(function (index, content) {

//console.log(content);

return content.nodeType === 3;

}).text();

console.log(contStr) //文本内容测试