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

<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的所有子元素和文本；再移除子元素。

//jquery方法
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) //文本内容测试

参考的资料：https://blog.csdn.net/zhangwenwu2/article/details/78365667