真诚的求一段 js 代码的讲解

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 3661 days ago, the information mentioned may be changed or developed.

想拿 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) {这里的几个变量怎么来的都没看懂....

希望有前辈可以帮忙讲解一下...

11 replies 2016-04-18 01:14:15 +08:00