サブエレメントのテキストを取得せずにエレメント内のテキストのみを取得

3532 ワード

<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の方法1:divのすべてのサブ要素とテキストを取得する;サブエレメントを除去します.
//jquery  
var obj = $("#content").clone();
obj.find(':nth-child(n)').remove();
console.log(obj.text()); //      

//     children()               ;        
//end()              
$("#content").clone().children().remove().end().text() //          

jqueryの方法2:filter()フィルタリング方法を使用する
//contents()               (      )
//
var contStr = $('#content').contents().filter(function (index, content) {
    //console.log(content)
    return content.nodeType === 3;
}).text();
console.log(contStr) //      

参考資料:https://blog.csdn.net/zhangwenwu2/article/details/78365667