jQuery select and wrap textNode
I want to select the text inside the div element and wrap it with a <b>
tag. The <b>
tag should only wrap to text inside div and not text inside a child element such as the <p>
tag in this example.
<div>Testing
<p>Some more text inside p</p>
<p>asdasdasdasdasde p</p>
Test
</div>
I'm able to select the &开发者_JAVA百科lt;p>
text using the following, but I'm not able to do the same for div
. I only want the text of div
and not p
. For this case it should select and wrap Testing
and Test
.
var x = $('p')[0].textContent; // this is not working for div.
console.log(x);
JSFiddle
You can use contents
, and filter by node type (3 is for text node):
$('div').contents()
.filter(function(){return this.nodeType === 3})
.wrap('<b />');
Example: http://jsfiddle.net/nJqKq/8
See also: Node Types, at MDC
Via pure JS and the 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/
if you dont want to wrap empty nodes use the following:
$('div').contents()
.filter(function(){
return this.nodeType === 3 && this.data.trim().length > 0
}).wrap('<b />');
精彩评论