是否存在生成“目录”的JavaScript解决方案。一个页面？ [英] Is there a JavaScript solution to generating a "table of contents" for a page?
问题描述
我在< h1> 到< h6> 标记中有标题。有没有办法可以使用JavaScript来生成用作锚标签的内容的目录？
I have headers in <h1> through <h6> tags. Is there a way that I can use JavaScript to generate a table of contents for the contents that serves as anchor tags as well?
我希望输出类似于：
<ol>
<li>Header 1</li>
<li>Header 1</li>
<li>Header 2</li>
<li>Header 3</li>
</ol>
我目前没有使用JavaScript框架，但我不明白为什么我不能使用一个。
I am not currently using a JavaScript framework, but I don't see why I couldn't use one.
我也在寻找已经完成的事情，因为我猜这是一个常见的问题，但如果没有，那么我自己的起点就会很好。
I am also looking for something done, since I'm guessing this is a common problem, but if not, a starting point to roll my own would be good.
推荐答案
我无法抗拒快速实施。
在页面的任何位置添加以下脚本：
Add the following script anywhere on your page:
window.onload = function () {
var toc = "";
var level = 0;
document.getElementById("contents").innerHTML =
document.getElementById("contents").innerHTML.replace(
/<h([\d])>([^<]+)<\/h([\d])>/gi,
function (str, openLevel, titleText, closeLevel) {
if (openLevel != closeLevel) {
return str;
}
if (openLevel > level) {
toc += (new Array(openLevel - level + 1)).join("<ul>");
} else if (openLevel < level) {
toc += (new Array(level - openLevel + 1)).join("</ul>");
}
level = parseInt(openLevel);
var anchor = titleText.replace(/ /g, "_");
toc += "<li><a href=\"#" + anchor + "\">" + titleText
+ "</a></li>";
return "<h" + openLevel + "><a name=\"" + anchor + "\">"
+ titleText + "</a></h" + closeLevel + ">";
}
);
if (level) {
toc += (new Array(level + 1)).join("</ul>");
}
document.getElementById("toc").innerHTML += toc;
};
您的页面应该是这样的结构：
Your page should be structured something like this:
<body>
<div id="toc">
<h3>Table of Contents</h3>
</div>
<hr/>
<div id="contents">
<h1>Fruits</h1>
<h2>Red Fruits</h2>
<h3>Apple</h3>
<h3>Raspberry</h3>
<h2>Orange Fruits</h2>
<h3>Orange</h3>
<h3>Tangerine</h3>
<h1>Vegetables</h1>
<h2>Vegetables Which Are Actually Fruits</h2>
<h3>Tomato</h3>
<h3>Eggplant</h3>
</div>
</body>
您可以在 https://codepen.io/scheinercc/pen/KEowRK （旧链接： http://magnetiq.com/exports/toc.htm （适用于IE，FF，Safari，Opera））
You can see it in action at https://codepen.io/scheinercc/pen/KEowRK (old link: http://magnetiq.com/exports/toc.htm (Works in IE, FF, Safari, Opera))
这篇关于是否存在生成“目录”的JavaScript解决方案。一个页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
