Javascript 将HTML分解为多个部分

我有一个很大的HTML源代码，我想把它分成多个部分。我已经能够完成这项任务的大部分，但我正在为一个方面而奋斗

当所有的HTML都包装在标签中时，我没有问题；但是，如果文本节点与HTML标记混合，则无法捕获所有部分

我做错了什么

下面是一个JSFIDLE，它显示了问题的一个示例

以下是我迄今为止为尝试分解HTML而编写的代码：

function parseElement(selector,parts, cycle) {
    var cc = $(selector),
        content = cc.children(),
        total = content.length,
        maxHeight = cc.height(),
        spaceLeft = maxHeight,
        cycle = cycle || 0;

    function addToPage(elem,elemSize) {
        elem.appendTo(parts[cycle]);
        spaceLeft -= elemSize;
    }

    function startNewPage() {
        cycle++
        parseElement(selector,parts, cycle);
    }    

    $.each(content,function(index,v){
        var elem = $(v),
            tag = elem[0].tagName.toLowerCase(),
            elemSize = elem.outerHeight(true);
        if (elemSize <= spaceLeft) {
            addToPage(elem,elemSize);

        } else if (elemSize > spaceLeft) {
            startNewPage();
        }
    });
}

问题 如何解析所有HTML文本，甚至是未包装的文本节点，从而保持结构和顺序

使现代化 感谢您的帮助，案例已解决，测量文本节点高度的唯一可能方法是将其包裹起来，下面是如何实现此目的的代码：

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

下面是一个完整的工作示例：

---

谢谢大家。

您可以使用css将其拆分为多个列。我不知道您的目标浏览器，但以下是仅适用于现代浏览器的代码：

html:

<div class="columns">

very long text split into 4 columns

</div>

---

此处示例：

您可以使用css将其拆分为多个列。我不知道您的目标浏览器，但以下是仅适用于现代浏览器的代码：

html:

<div class="columns">

very long text split into 4 columns

</div>

---

此处示例：

您面临的问题来自于使用：

还请注意，与大多数jQuery方法一样，.children不会返回 文本节点

相反，您应该使用本机DOM属性childNodes，它确实包含文本节点：

cc[0].childNodes;

或者，更好的方法是将引用传递给DOM节点：

function parseElement(element, parts, cycle) {
    var cc = $(element),
        content = element.childNodes,
        total = content.length,
        maxHeight = cc.height(),
        spaceLeft = maxHeight,
        cycle = cycle || 0;

    //Your other functions down here...
}

然后像这样打电话：

parseElement(document.getElementById('source2'), ['#part3','#part4']);

---

请注意，您需要重新访问其他方法以适应这些更改。

您面临的问题来自使用：

还请注意，与大多数jQuery方法一样，.children不会返回 文本节点

相反，您应该使用本机DOM属性childNodes，它确实包含文本节点：

cc[0].childNodes;

或者，更好的方法是将引用传递给DOM节点：

function parseElement(element, parts, cycle) {
    var cc = $(element),
        content = element.childNodes,
        total = content.length,
        maxHeight = cc.height(),
        spaceLeft = maxHeight,
        cycle = cycle || 0;

    //Your other functions down here...
}

然后像这样打电话：

parseElement(document.getElementById('source2'), ['#part3','#part4']);

---

请注意，您需要重新访问其他方法以适应这些更改。

我不理解反对票和接近票，这个问题是可以理解的…@JeromeC。我同意。我甚至修改了它，以帮助那些可能很难理解的人。我不理解反对票和接近票，这个问题是可以理解的…@JeromeC。我同意。我甚至修改了它，以帮助那些可能难以理解的人。问题是关于解析页面的HTML，而不是更改布局。谢谢你的建议，但是我正在构建EPUB reader，可能有100多个页面，我需要生成如此混乱的页面：问题是解析页面的HTML，不改变布局。谢谢你的建议，不过我正在构建EPUB reader，可能有100多个页面，我需要生成那些混乱不堪的页面：@SergeiZahharenko这里有一个可能会帮助你的方法。不幸的是，我不能再花时间解决这个问题了。我建议将文本节点包装在元素中，以获得它们的高度，否则，它们将没有高度。是的，似乎你是对的，我得出了相同的结论，你必须包装它们，但正是你的线索促使我找到了解决方案谢谢，完成后将使用解决方案更新我的问题：非常好@SergeiZahharenkojust for info.。内容类似于。children Except它还返回文本节点！：@谢尔盖扎哈连科谢谢！我不知道。@SergeiZahharenko这里有一个可能会帮助你的方法。不幸的是，我不能再花时间解决这个问题了。我建议将文本节点包装在元素中，以获得它们的高度，否则，它们将没有高度。是的，似乎你是对的，我得出了相同的结论，你必须包装它们，但正是你的线索促使我找到了解决方案谢谢，完成后将使用解决方案更新我的问题：非常好@SergeiZahharenkojust for info.。内容类似于。children Except它还返回文本节点！：@谢尔盖扎哈连科谢谢！我没有意识到这一点。