Question

我搜索了很多，但我没有找到任何相关内容。

后端在页面中打印整个文档，我需要根据标题（从h2到h6）创建摘要，如Microsoft Office Word。

我会像这样创建一个嵌套的有序列表，但是有更多级别：

1. Lorem Ipsum
    1.1 Lorem ipsum
    1.2 Lorem ipsum
2. Lorem ipsum

抱歉，我没有代码，因为这是一个非常具体的事情，我不知道如何开始：P 你可以给我发一个代码或一个想法。

对于任何英语错误抱歉。

编辑：

http://jsfiddle.net/9x64gjam/1/ 为了更好的解释，javascript应该使用div.text来呈现像小提琴中的有序列表。

Answer 1

我们走了。请继续尝试下面或on jsFiddle（http://jsfiddle.net/9x64gjam/3/）。向下滚动到＆＃34;目录＆＃34;。

我们所做的是迭代所有标题（h1，h2等）并创建一个堆栈，然后我们添加（push）元素，如果我们遇到标题下一级（例如，如果我们在h2级并且遇到h3）。当我们到达较低级别的标题时，我们会从堆栈中删除元素（pop），直到达到顶级（例如，如果我们位于级别h5，则下一个是{{1我们将h2四个元素：pop，h5，h4和h3）。

请注意，我稍微更新了您的HTML，并在您拥有标题的区域周围创建了h2。

＆＃13;

div#content

＆＃13;

$(function () {
        "use strict";

        var $content = $('#content'), // where we should look for headers.
            toc = document.createElement('ol'), // the main "table of contents" element.
            listStack = [];

        // Find all headers first.
        $content.children('h1, h2, h3, h4, h5, h6').each(function (index, el) {
            var currentHeader = el,
                currentLevel = Number(currentHeader.tagName.substr(1)), // get the level of this header.

                lastListItem = listStack[listStack.length - 1],
                lastListItemLevel = lastListItem ? lastListItem.level : 0, // get the level of the previous header.
                ol, li;

            // Ensure a new header is on a higher level.
            // pop while we do not reach the first closest parent header (of the higher level).
            while (currentLevel <= lastListItemLevel) {                     listStack.pop();
                lastListItem = listStack[listStack.length - 1];
                lastListItemLevel = lastListItem ? lastListItem.level : 0;
            }

            // The content of the current header itself.
            li = document.createElement('li');
            li.innerHTML = currentHeader.innerHTML;

            // New placeholder for the (possible) future children
            ol = document.createElement('ol');

            li.appendChild(ol);

            if (lastListItem) {
                // Append the new child to the current placeholder.
                lastListItem.ol.appendChild(li);
            } else {
                // If there were no last item, add the new child on the top level.
                toc.appendChild(li);
            }

            // Save a reference to the new parent on this level.
            listStack.push({
                level: currentLevel,
                ol: ol
            });
        });

        document.body.appendChild(toc);
    });

＆＃13;

ol {
    counter-reset: item
}
li {
    display: block
}
li:before {
    content: counters(item, ".")" ";
    counter-increment: item
}

＆＃13;

Answer 2

更新

使用replaceWith jquery，例如：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>find demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<ol type="1">
    <h1>Main Title</h1>
</ol>

<script>
  $("h1").replaceWith( "<li>" + $("h1").text() + "</li>" );
</script>

</body>
</html>

动态创建基于文档的摘要

2 个答案: