这有点长,请仔细阅读。我已经对重要部分进行了注释,以便对函数的流程有一个大致的了解。
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 演示