jQuery选择并包装textNode

Question

我想选择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);

JSFiddle

Answer 1

您可以使用contents，并按节点类型过滤(3表示文本节点)：

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

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

另请参阅：Node Types，在MDC

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 />');