jQuery 选择并换行 textNode

发布于 2024-10-21 21:19:27 字数 691 浏览 4 评论 0原文

我想选择 div 元素内的文本并用标记将其包裹起来。 标记只能换行到 div 内的文本，而不是子元素内的文本，例如本例中的

标记。

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

我可以使用以下命令选择

文本，但无法对 div 执行相同操作。我只想要 div 的文本，而不是 p。对于这种情况，它应该选择并包装 Testing 和 Test。

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

JSFiddle

原文

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 <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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤独陪着我 2024-10-28 21:19:28

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

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

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

回复收藏 0 原文

破晓 2024-10-28 21:19:27

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

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

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

另请参阅：节点类型，在 MDC

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

回复收藏 0 原文

埋葬我深情 2024-10-28 21:19:27

通过纯 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/

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/

回复收藏 0 原文

~没有更多了~