3

我有一个这样的经过处理的 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>

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

4

2 回答 2

1

这是我最大的努力：在这里演示。显然，您需要一个更复杂的解决方案。您可能想查看 wordpress 格式化 API 和wpautop函数。

您将需要对正则表达式 ( ) 和函数进行一些重大编辑"/^<\\/?div|^<\\/?ul|^<\\/?li|<\\/?p/"，但至少这会让您开始！

于 2013-01-07T04:56:49.703 回答
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>元素，因为这些不需要格式化。它创建一个段落节点并一次一个地移动父节点，直到它在文本节点中遇到换行符，此时它适当地拆分文本节点。

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

我应该警告说，这不会比父母的直系子女下降得更远，但是如果您有这种需要，请告诉我。基本上，这个函数不会执行这个翻译：

<span>Hello
world</span>

... 进入 ...

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

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

jsFiddle 演示

于 2013-01-07T05:11:47.537 回答