如何为任何标题稳健地解析文档并构建< ul>那些标题的树 [英] how to robustly parse a document for any headings and build a <ul> tree of just those headings
问题描述
所以我解析一个文档，以便用stackHeadings（）获取所有标题。我这样做是为了使用buildNav（）构建Microsoft Word样式文档映射。这目前工作正常，但它不是非常强大，并且随着标题不遵循严格的顺序而中断......例如（如果你从一个H2开始它就会破坏，如果你窝下H3而H1就会破坏，等等......）
So I parse through a document in order to grab all the headings with stackHeadings(). I do this in order to build a Microsoft Word style document map with buildNav(). This currently works OK but its not very robust and breaks anytime the headings do not follow a strict order... e.g. (If you start with an H2 it breaks, if you nest a H3 under and H1 it breaks, etc...)
我无法找到最好的修复此问题的方法（使其更加健壮）。我正在利用jQuery的`nextUntil'函数来查找两个h1之间的所有h2。
I can't quite figure out the best way to fix this (make it more robust). I'm taking advantage of jQuery's `nextUntil' function to find all the h2s between two h1s.
一种可能性是替换：
elem.nextUntil( 'h' + cur, 'h' + next )
with
elem.nextUntil( 'h' + cur, 'h' + next + ',h' + (next + 1) + ',h' + (next + 2) ... )
查找同一级别的两个标题之间的所有子标题。但是现在h3s的h3个孩子只会嵌套一个级别而不是两个。
to find ALL subheadings between two headings of the same level. But now h3 children of h1s would only be nested one level rather than two.
那么你必须将当前的标题级别与父级标题级别进行比较，并且如果有一个以上的跳跃（h1 - > h3），你必须在它们之间创建一个空子，作为缺失h2的嵌套占位符。
So then you'd have to compare the current heading level with the parent heading level, and if there's a jump of more than one (h1 -> h3), you'd have to create an empty child between them as a nesting placeholder for the missing h2.
任何想法或解决方案将不胜感激！
Any ideas or solutions would be greatly appreciated!
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)
推荐答案
我把一些能做你想做的JavaScript扔到一起 http://jsfiddle.net/fA4EW/
I threw together some JavaScript that will do what you want http://jsfiddle.net/fA4EW/
这是一个相当简单的递归函数使用一系列元素（节点）并相应地构建UL结构。为了与问题保持一致，当你从H1到H3等时，我添加了占位符（空）列表元素。
It's a fairly straightforward recursive function that consumes an array of elements (nodes) and builds the UL structure accordingly. To be consistent with the question I add the placeholder (empty) list elements when you from an H1 to an H3 etc.
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);
这篇关于如何为任何标题稳健地解析文档并构建< ul>那些标题的树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
