javascript - jQuery - 将所有未包装的文本包装在 p 标签中

标签 javascript jquery

我遇到以下代码被写入我的页面的情况。

<div>
    Some text here which is not wrapped in tags
    <p>Some more text which is fine</p>
    <p>Blah blah another good line</p>
</div>

在这种情况下,它似乎总是第一行没有被包装在 p 标签中,这可能使解决这个问题更容易,尽管不是每次都这样。有时没问题。

我需要做的是确定第一行是否换行,如果没有则换行。

不幸的是,我不确定从哪里开始解决这个问题,因此我们将不胜感激。

最佳答案

尝试使用此代码来包装任何未使用 <p> 包装的 TextNodes标签。

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], whitespace = /^\s*$/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || !whitespace.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
    }

    var textnodes = getTextNodesIn($("#demo")[0])​​​​;
    for(var i=0; i < textnodes.length; i++){
        if($(textnodes[i]).parent().is("#demo")){
            $(textnodes[i]).wrap("<p>");
        }
    }​

这是一个jsfiddle这表明了这一点。

PS:TextNode检测部分借鉴自this answer

关于javascript - jQuery - 将所有未包装的文本包装在 p 标签中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13836633/

相关文章:

Javascript按顺序动画几个DIV

javascript - 跨域iframe问题

php - 更新脚本使计数器加倍

javascript - json.stringify 不处理对象方法

javascript - CSS 中过渡属性的动态值

javascript - React Material UI CardHeader 标题溢出点

jquery - 由 jQuery 元素组成的对象

javascript - 如果是则返回确认调用函数

jquery - 我怎样才能让它不动并且只在它下面加载?

javascript - 清除所有内容的 Workbox 缓存