Question

我有一个很大的HTML源代码，我想把它分成多个部分。我已经能够完成大部分任务，但我正在努力解决一个问题。

当所有HTML都包含在标签中时，我没有问题;但是，如果文本节点与HTML标签混合，我将无法捕获所有部分。

我做错了什么？

下面是一个显示问题示例的jsFiddle。

http://jsfiddle.net/acrashik/aDm8L/1/

这是我到目前为止试图分解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 />');

这是一个完全有效的例子：

http://jsfiddle.net/acrashik/aDm8L/20/

谢谢大家。

Answer 1

您遇到的问题来自于使用jQuery.children()：

另请注意，与大多数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']);

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

Answer 2

您可以使用css分成几列。我不知道您的目标浏览器，但这里是代码（仅在现代浏览器上）：

html：

<div class="columns">

very long text split into 4 columns

</div>

css：

.columns {
            -webkit-columns: 4;
            -moz-columns: 4;
            columns: 4;
}

示例：http://codepen.io/raphaelgoetter/pen/ehfxb

将HTML分成几部分

问题

更新

2 个答案: