javascript - Javascript 中的 HTML 行 Controller

Question

我有这样一个被操纵的 HTML 文本:

Lorem ipsum <a href="#">dolor</a> sit amet
<div>Consectetur adipisicing elit, sed do </div> eiusmod tempor
incididunt ut labore et dolore magna aliqua.

我需要将这些行转换成这样:

<p>Lorem ipsum <a href="#">dolor</a> sit amet</p>
<div>Consectetur adipisicing elit, sed do </div>
<p>eiusmod tempor</p>
<p>incididunt ut labore et dolore magna aliqua</p>

如何转换？有任何想法吗？谢谢!

Answer 1

本文有点长，请仔细阅读。我对重要部分进行了注释，以提供有关函数流程的总体思路。

function paragraphify(parent) {
    var i, str, p, workspace = document.createElement('div'), nodes = parent.childNodes;

    p = document.createElement('p');
    workspace.appendChild(p);

    // Filter nodes out of parent and into the workspace.
    while(nodes.length > 0) {
        // Get the first child node of the parent element.
        node = nodes[0];

        // Divs and paragraphs need not be processed; skip them.
        if(node.nodeName === 'P' || node.nodeName === 'DIV') {
            workspace.insertBefore(node, p);
            continue;
        }

        // Drop the node into the paragraph.
        p.appendChild(node);

        // Skip non-text nodes.
        if(node.nodeName !== '#text') { continue; }

        // We need to parse the text of the node for newlines.
        str = node.nodeValue;
        for(i = 0; i < str.length; i += 1) {
            if(str[i] === '\n') {
                // If text contains a newline ...

                if(i < (str.length - 1)) {
                    // ... and there's enough space to split it, then split it.
                    parent.insertBefore(document.createTextNode(str.substr(i+1)), nodes[0]);
                    node.nodeValue = str.substr(0, i+1);
                }

                // Create a new paragraph for holding elements, and add it to the workspace.
                p = document.createElement('p');
                workspace.appendChild(p);

                // Break here to return to the node-processing loop.
                // If the text was split on a newline, then that will be the next node to be processed.
                break;
            }
        }
    }

    // Pull the nodes back out of the workspace and into the parent element.
    nodes = workspace.children;
    while(nodes.length > 0) {
        node = nodes[0];

        // Skip empty paragraphs.
        if(node.nodeName === 'P' && node.textContent.replace(/\s/g, '').length === 0) {
            workspace.removeChild(node);
        }
        else {
            parent.appendChild(node);
        }
    }
}

此函数将按照您在示例中指定的方式执行。 <强> Paragraphify 遍历 parent 的子节点参数，跳过 <div>和 <p>元素，因为这些不需要格式化。它创建一个段落节点并一次移动一个父节点，直到它在文本节点中遇到换行符，此时它适本地拆分文本节点。

这会一直处理到父元素为空为止。然后将工作区元素传输回父级。这样做是为了简化处理，因为操作您正在积极迭代的集合可能会很困惑。

---

我应该警告，这不会比 parent 的直系子女更进一步，但如果您有此需要，请告诉我。简而言之，这个函数不会执行这个翻译:

<span>Hello
world</span>

...进入...

<p><span>Hello</span></p>
<p><span>world</span></p>

即便如此，这也应该是使用基本 Javascript 在 HTML 中进行行处理所需的基本功能的一个很好的示例。

jsFiddle Demonstration