Just a little JS snippet that I developed for a colleague. They had an internal wiki and needed a way to automatically generate a simple table of contents in a certain format (1, 1.1, 1.1.1 etc) automatically based on the header tags. No style yet but this was a fun one.
A Pen by Adam Quinlan on CodePen.
| <h1>Lorem ipsum dolor.</h1> | |
| <p>Jeezly Moody's crunchah Saddee. Bub lobstahrin' hawsun around queeah Bean's over t' yut kid ayuhpawt Hold'er Newt she's, heddin for da ruhbarb!, wicked cunnin' hahd tellin' not knowin' clam chowdah Mahdin's. Bluebries mistah man dingy puckahbrush Bean's Hammah Gohd Dammah, feeder' the beans Katahdin Bangoah.</p> | |
| <h2>Bub lobstahrin'</h2> | |
| <p>Ayuhpawt muckle riyht on'ta her lobstahrin' I'm tellin' you wee bit nippy blizzahd p'dayduhs bub. Huntin' deeah wreckah dooryahd gawmy over t' Bean's tube steak down cellah, native up t' pig fat moose well theyah. Bang a left blizzahd crunchah Sundee crittah. Back woods Fryeburg Fayah clammin' Bah Hahbah, Katahdin gawmy from away no-see-um, kid clam chowdah mugup from away robin showah slower than molasses going uphill in January clam chowdah, You is sum wicked suhmart clam chowdah Loyston-Ahban. Railed 'em clammin' yahd heatah Loyston-Ahban.</p> | |
| <h2>suhmart clam chowdah</h2> | |
| <p>Jeezly Moody's crunchah Saddee. Bub lobstahrin' hawsun around queeah Bean's over t' yut kid ayuhpawt Hold'er Newt she's, heddin for da ruhbarb!, wicked cunnin' hahd tellin' not knowin' clam chowdah Mahdin's. Bluebries mistah man dingy puckahbrush Bean's Hammah Gohd Dammah, feeder' the beans Katahdin Bangoah.</p> | |
| <p>Ayuhpawt muckle riyht on'ta her lobstahrin' I'm tellin' you wee bit nippy blizzahd p'dayduhs bub. Huntin' deeah wreckah dooryahd gawmy over t' Bean's tube steak down cellah, native up t' pig fat moose well theyah. Bang a left blizzahd crunchah Sundee crittah. Back woods Fryeburg Fayah clammin' Bah Hahbah, Katahdin gawmy from away no-see-um, kid clam chowdah mugup from away robin showah slower than molasses going uphill in January clam chowdah, You is sum wicked suhmart clam chowdah Loyston-Ahban. Railed 'em clammin' yahd heatah Loyston-Ahban.</p> | |
| <p>Hawsun around Chundah. Gohd dammah. Moosetown bluebries nummah than a faht some eleghant wreckah Sundee. P'dayduhs podunk owt, up t' camp yow uns lobstahrin' grindah Bah Hahbah huck puff Sundee, wreckah some wicked wicked pissah robin showah the pit. Swampdonkey Bean's gettin' ugly slower than molasses going uphill in January Auguster podunk, tube steak cah The 'Gash bookin' it Saddee Bah Hahbah fellers ankle biteah noseeum, lobstah Fryeburg Fayah rig up aht, dingy Mount Dessuht hoppa mistah man mummah pig fat whawf.</p> | |
| <h3>Hawsun around</h3> | |
| <p>Hawsun around Chundah. Gohd dammah. Moosetown bluebries nummah than a faht some eleghant wreckah Sundee. P'dayduhs podunk owt, up t' camp yow uns lobstahrin' grindah Bah Hahbah huck puff Sundee, wreckah some wicked wicked pissah robin showah the pit. Swampdonkey Bean's gettin' ugly slower than molasses going uphill in January Auguster podunk, tube steak cah The 'Gash bookin' it Saddee Bah Hahbah fellers ankle biteah noseeum, lobstah Fryeburg Fayah rig up aht, dingy Mount Dessuht hoppa mistah man mummah pig fat whawf.</p> | |
| <p>Queeah robin showah gettin' ugly from away sawr flatlandas Fryeburg Fayah can't get theyah from heeyah Hold'er Newt she's, heddin for da ruhbarb!, suppah bluebries hahd tellin' not knowin' swampdonkey, bluebries ankle biteah stove up. Yow uns bookin' it bogan back woods alkie stove-up native whawf stove up, Auguster sumpin' fierce yahd, puff some eleghant suppah wreckah slower than molasses going uphill in January from away bluebries chimbly cubboard potatoes.</p> | |
| <h1>Bah Hahbah</h1> | |
| <p>Ayuhpawt muckle riyht on'ta her lobstahrin' I'm tellin' you wee bit nippy blizzahd p'dayduhs bub. Huntin' deeah wreckah dooryahd gawmy over t' Bean's tube steak down cellah, native up t' pig fat moose well theyah. Bang a left blizzahd crunchah Sundee crittah. Back woods Fryeburg Fayah clammin' Bah Hahbah, Katahdin gawmy from away no-see-um, kid clam chowdah mugup from away robin showah slower than molasses going uphill in January clam chowdah, You is sum wicked suhmart clam chowdah Loyston-Ahban. Railed 'em clammin' yahd heatah Loyston-Ahban.</p> |
| document.addEventListener("DOMContentLoaded", function (event) { | |
| let htags = document.querySelectorAll('h1, h2, h3'); | |
| let n = function (node) { | |
| if (!node) { | |
| return false | |
| } else { | |
| return Number(node.tagName.substr(node.tagName.length - 1)); | |
| } | |
| } | |
| let tocString = "<strong>Table of Contents</strong>"; | |
| let pn = ''; | |
| for (let index = 0; index < htags.length; index++) { | |
| let current = htags[index]; | |
| let cn = n(current); | |
| let tagid = "tag-" + index; | |
| let tocItem = '<a href="#' + tagid + '">' + current.innerText + '</a>'; | |
| current.setAttribute("id", tagid); | |
| if (!current.innerText.replace(/\s/g, '').length) { | |
| console.log('You have an empty h tag somewhere... we are not putting it in the table of contents, sorry.'); | |
| } else if (!pn) { | |
| for (let index = 0; index < cn; index++) { | |
| tocString += '<ol>' | |
| } | |
| tocString += "<li>" + tocItem + "</li>"; | |
| pn = cn; | |
| } else if (cn === pn) { | |
| tocString += "<li>" + tocItem + "</li>"; | |
| pn = cn; | |
| } else if (cn > pn) { | |
| tocString = tocString.slice(0, -5); | |
| for (let index = 0; index < (cn - pn); index++) { | |
| tocString | |
| tocString += '<ol>' | |
| } | |
| tocString += "<li>" + tocItem + "</li>"; | |
| pn = cn; | |
| } else if (cn < pn) { | |
| for (let index = 0; index < (pn - cn); index++) { | |
| tocString += '</ol></li>' | |
| } | |
| tocString += "<li>" + tocItem + "</li>"; | |
| pn = cn; | |
| } | |
| if ((htags.length - 1) === index) { | |
| let olCount = (tocString.match(/<ol>/g) || []).length; | |
| let endolCount = (tocString.match(/<\/ol>/g) || []).length; | |
| for (let index = 0; index < olCount - endolCount; index++) { | |
| tocString += "</ol>" | |
| } | |
| } | |
| } | |
| //Add in the Table of Contents and styling | |
| let tocDiv = document.createElement('div'); | |
| tocDiv.classList.add('aqtoc'); | |
| tocDiv.innerHTML = tocString; | |
| let styleInsert = '.aqtoc ol{list-style:none;counter-reset:item;text-align:left}.aqtoc ol li{counter-increment:item}.aqtoc ol li:before{margin-right:10px;content:counters(item,".") " ";display:inline-block}.aqtoc{max-width:85%;margin:35px auto;padding:20px;border:1px solid black;text-align:center}.aqtoc strong{font-size:25px}'; | |
| let styleEl = document.createElement('style'); | |
| styleEl.innerHTML = styleInsert; | |
| document.body.insertBefore(tocDiv, document.body.firstChild); | |
| document.body.insertBefore(styleEl, document.body.firstChild); | |
| }); |
| body{ | |
| margin: 0 auto; | |
| max-width: 700px; | |
| } |