jQueryselect并包装textNode

我想selectdiv元素中的文本，并用<b>标签包装它。 <b>标签应该只包裹在div中的文本，而不是包含在子元素中的文本，如本例中的<p>标签。

 <div>Testing <p>Some more text inside p</p> <p>asdasdasdasdasde p</p> Test </div> 

我可以select使用以下的<p>文本，但是我不能为div做同样的事情。 我只想要div的文本，而不是p 。 对于这种情况，它应该select并包装Testing和Test 。

 var x = $('p')[0].textContent; // this is not working for div. console.log(x); 

的jsfiddle

Answer 1

您可以使用contents ，并按节点types进行过滤（3为文本节点）：

 $('div').contents() .filter(function(){return this.nodeType === 3}) .wrap('<b />'); 

例如： http : //jsfiddle.net/nJqKq/8

另请参阅：MDC上的节点types

Answer 2

通过纯JS和DOM：

HTML：

 <div id="test">Testing <p>Some more text inside p</p> <p>asdasdasdasdasde p</p> Test </div> 

JS：

 getTextNodes(document.getElementById("test")); function getTextNodes(parent) { var textNodes = []; var nodes = parent.childNodes; for(var i=0;i<nodes.length;i++) { if(nodes[i].nodeType === 3) { textNodes.push(nodes[i]); wrapBold(nodes[i], parent); } } } function wrapBold(node, parent) { //check for whitespace text nodes if(node.data.match(/[^\t\n\r ]/)) { var bold = document.createElement("strong"); parent.insertBefore(bold, node); bold.appendChild(node); }else { return false; } } 

http://jsfiddle.net/dnjsY/5/

Answer 3

如果你不想包装空的节点使用以下内容：

 $('div').contents() .filter(function(){ return this.nodeType === 3 && this.data.trim().length > 0 }).wrap('<b />');