我想选择 div 元素内的文本并用<b>标签包裹它。该<b>标签只能换到里面的div文本和子元素中没有文本，如<p>在这个例子中标签。
<div>Testing
<p>Some more text inside p</p>
<p>asdasdasdasdasde p</p>
Test
</div>
我可以<p>使用以下内容选择文本，但我无法对div. 我只想要 的文本div而不是p。对于这种情况，它应该选择并包装Testing和Test。
var x = $('p')[0].textContent; // this is not working for div.
console.log(x);
您可以使用contents, 并按节点类型过滤（3 用于文本节点）：
$('div').contents()
.filter(function(){return this.nodeType === 3})
.wrap('<b />');
示例：http : //jsfiddle.net/nJqKq/8
另见：节点类型，在 MDC
通过纯 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;
}
}
如果您不想包装空节点，请使用以下内容：
$('div').contents()
.filter(function(){
return this.nodeType === 3 && this.data.trim().length > 0
}).wrap('<b />');