I had a project to create table of contents of huge text files with .html format, it was thousands. Then I’ve developed a JavaScript Table of Contents generator that detect some text to be included as TOC.
Watch this video to see my demonstration on how to use it:
Here is the source code (you must run the program through local web server):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TOCLink Generator by Zofia Kreasi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body{
font-family: arial;
}
div {
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px;
}
input {
display: block;
padding: 10px;
margin-bottom: 10px;
width: 75%;
}
</style>
</head>
<body>
<div>
<iframe id="myframe" style="display: none;"></iframe>
<h1>TOCLink Generator</h1>
<p>Generating table of contents with links.</p>
<div id="result" style="height: 200px; overflow-y: auto; border: 1px solid green; font-size: 9px;">Results go here...</div>
<button onclick="indexit()">Start Indexing</button>
<p>Status: <span id="statusmessage">Ready.</span></p>
</div>
<script>
var book = "myfiles"; //folder name of text files
var firstPage = 1; // first page's number
var lastPage = 10; // last page's number
var content = [];
var currentPage = firstPage;
function indexit(){
if(currentPage < lastPage){
document.getElementById("result").innerHTML = "Searching...";
document.getElementById("myframe").src = book + "/page_" + currentPage + ".html";
document.getElementById("myframe").onload = function(){
var dW = document.getElementById("myframe").contentWindow;
var dD = document.getElementById("myframe").contentDocument;
var dDContent = "";
for(var s = 0; s < dD.getElementsByTagName("p").length; s++){
if(dD.getElementsByTagName("p")[s].innerHTML.toLowerCase().indexOf("book") > -1){
dDContent += "<a style='font-size: 20px; color: green;' href='" + book + "/page_" + currentPage + ".html'>" + dD.getElementsByTagName("p")[s].innerHTML + "</a><br>";
}
if(dD.getElementsByTagName("p")[s].innerHTML.toLowerCase().indexOf("story") > -1){
dDContent += "<a style='font-size: 14px; color: blue;' href='" + book + "/page_" + currentPage + ".html'>" + dD.getElementsByTagName("p")[s].innerHTML + "</a><br>";
}
}
if(dDContent != "")
content.push(dDContent);
document.getElementById("statusmessage").innerHTML = "Indexing page " + currentPage;
currentPage++;
indexit();
};
} else setTimeout(function(){
var tempItemDivs = "";
for(var i = 0; i < content.length; i++){
tempItemDivs += content[i];
}
document.getElementById("result").innerHTML = tempItemDivs;
document.getElementById("statusmessage").innerHTML = "Done!";
content = [];
currentPage = firstPage;
}, 100)
}
</script>
</body>
</html>
loading...