jQuery 选择和包装 textNode答案

【问题标题】：jQuery select and wrap textNodejQuery 选择和包装 textNode
【发布时间】：2011-07-14 14:01:33
【问题描述】：

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

【问题讨论】：

标签： javascript jquery jquery-selectors textnode

【解决方案1】：

可以使用contents，按节点类型过滤（3为文本节点）：

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

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

另请参阅：Node Types，在 MDC

【讨论】：

谢谢大家。实际上，与一般的 jQuery 行 :) 相比，这个相当冗长
对我来说，它不仅在b标签中包含“测试”，而且还在所有其他标签之间创建4-5个额外的b标签（即在空的地方 - 可能是空的文本节点），所以它不能很好地工作。在 Chrome Canary 中进行测试 - 看起来它添加了不需要的空白。
它对每个：data: "↵"（打印 contents() 以找到它）执行此操作，并自动添加回车/输入。
注意：contents函数不能访问跨域站点的iframe
这太完美了！

【解决方案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/

【讨论】：

【解决方案3】：

如果您不想包装空节点，请使用以下内容：

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

【讨论】：