想拿 HTML 直接生成 table of contents, 用 js 做 于是找到了这个 http://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-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>
You can see it in action at http://magnetiq.com/exports/toc.htm (Works in IE, FF, Safari, Opera)
主要就是document.getElementById("contents").innerHTML.replace(
后面的看不懂,
function (str, openLevel, titleText, closeLevel) {
这里的几个变量怎么来的都没看懂....
希望有前辈可以帮忙讲解一下...
1
Vladimir 2016-04-17 20:39:13 +08:00
|
4
hxsf 2016-04-17 20:59:03 +08:00
function (str, openLevel, titleText, closeLevel) 的参数就是 这个 正则的 /<h([\d])>([^<]+)<\/h([\d])>/gi 匹配结果
|
9
lwbjing 2016-04-17 23:21:45 +08:00
@cqcn1991 说的简单点就是,正则里用括号包了 n 个,后面函数就可以跟 1 + n 个参数... 1 是全文匹配的,每个 n 是单个括号匹配的内容...
|
11
wdhwg001 2016-04-18 01:14:15 +08:00 via iPhone
犯了大忌…不应该用正则处理 html 标签的,因为 js 的正则没有平衡组,用正则会在数据不可信任的时候出现各种 bug 和漏洞…
|