如何为任何标题稳健地解析文档并构建仅仅那些标题的<ul>树

Question

所以我解析了一个文档,以便用stackHeadings()获取所有标题.我这样做是为了使用buildNav()构建Microsoft Word样式文档映射.这目前工作正常,但它不是非常强大,并且在标题不遵循严格的顺序的任何时候打破...例如(如果你从H2开始它打破,如果你窝下H3而H1打破,等等......)

我无法找到解决这个问题的最佳方法(使其更加强大).我正在利用jQuery的`nextUntil'函数来查找两个h1之间的所有h2.

一种可能性是取代:

elem.nextUntil( 'h' + cur, 'h' + next )

同

elem.nextUntil( 'h' + cur, 'h' + next + ',h' + (next + 1) + ',h' + (next + 2) ... )

找到同一级别的两个标题之间的所有子标题.但现在h3的h3子女只会嵌套一级而不是两级.

那么你必须将当前的标题级别与父标题级别进行比较,如果有多个跳转(h1 - > h3),你必须在它们之间创建一个空子项作为嵌套占位符缺少的h2.

任何想法或解决方案将不胜感激!

stackHeadings = (items, cur, counter) ->

    cur = 1 if cur == undefined
    counter ?= 1
    next = cur + 1
    for elem, index in items
      elem = $(elem)
      children  =  filterHeadlines( elem.nextUntil( 'h' + cur, 'h' + next ) )
      d.children = stackHeadings( children, next, counter ) if children.length > 0
      d


filterHeadlines = ( $hs ) ->
    _.filter( $hs, ( h ) -> $(h).text().match(/[^\s]/) )

buildNav = ( ul, items ) ->
    for child, index in items
        li = $( "<li>" )
        $( ul ).append( li )
        $a = $("<a/>")
        $a.attr( "id", "nav-title-" + child.id )

        li.append( $a )

        if child.children
            subUl = document.createElement( 'ul' )
            li.append( subUl )
            buildNav( subUl, child.children )

items = stackHeadings( filterHeadlines( source.find( 'h1' ) ) )
ul = $('<ul>')
buildNav( ul, items)

Answer 1

我把一些JavaScript做了你想做的事情http://jsfiddle.net/fA4EW/

这是一个相当简单的递归函数,它使用一系列元素(节点)并相应地构建UL结构.为了与问题保持一致,当你从H1到H3等时,我添加了占位符(空)列表元素.

function buildRec(nodes, elm, lv) {
    var node;
    // filter
    do {
        node = nodes.shift();
    } while(node && !(/^h[123456]$/i.test(node.tagName)));
    // process the next node
    if(node) {
        var ul, li, cnt;
        var curLv = parseInt(node.tagName.substring(1));
        if(curLv == lv) { // same level append an il
            cnt = 0;
        } else if(curLv < lv) { // walk up then append il
            cnt = 0;
            do {
                elm = elm.parentNode.parentNode;
                cnt--;
            } while(cnt > (curLv - lv));
        } else if(curLv > lv) { // create children then append il
            cnt = 0;
            do {
                li = elm.lastChild;
                if(li == null)
                    li = elm.appendChild(document.createElement("li"));
                elm = li.appendChild(document.createElement("ul"));
                cnt++;
            } while(cnt < (curLv - lv));
        }
        li = elm.appendChild(document.createElement("li"));
        // replace the next line with archor tags or whatever you want
        li.innerHTML = node.innerHTML;
        // recursive call
        buildRec(nodes, elm, lv + cnt);
    }
}
// example usage
var all = document.getElementById("content").getElementsByTagName("*");
var nodes = []; 
for(var i = all.length; i--; nodes.unshift(all[i]));
var result = document.createElement("ul");
buildRec(nodes, result, 1);
document.getElementById("outp").appendChild(result);