Obtuve una función TOC como esta, pero esto solo funciona si la etiqueta del encabezado está clara, quiero decir así
<h1>this will work</h1> pero cuando agrego alguna clase o identificación o todo dentro de <h1> la lista no aparecerá ejemplo <h1 class="test">This list wont be appear cz I have class</h1>
¿Podemos ignorar la clase para que el encabezado aparezca en la lista?
document.addEventListener('DOMContentLoaded', function() { TableOfContents(); } ); function TableOfContents() { var toc = ""; var level = 0; var container = document.querySelector(container) || document.querySelector('#contents'); var output = output || '#toc'; container.innerHTML = container.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('</li></ul>'); } else { toc += (new Array(level+ 1)).join('</li>'); } level = parseInt(openLevel); var anchor = titleText.replace(/ /g, "_"); toc += '<li><a href="#' + anchor + '">' + titleText + '</a>'; return '<h' + openLevel + '><a href="#' + anchor + '" id="' + anchor + '">' + titleText + '</a></h' + closeLevel + '>'; } ); if (level) { toc += (new Array(level + 1)).join('</ul>'); } document.querySelector(output).innerHTML += toc; }; <div id="toc"> Table of Contents </div> <div id="contents" class="blog-contents"> <h1>this is h1</h1> <h2>this is h2</h2> <h1 class="test" id="myid">why this section dont appear?</h1> </div> verifique el ejemplo. Tengo 3 encabezados dos que funcionan bien, pero uno no funciona porque agregué class e Id .
Usar expresiones regulares para analizar HTML nunca es una buena idea. A continuación, creé un pequeño fragmento que demuestra cómo se puede hacer el trabajo usando document.querySelector() y Element.prototype.querySelectorAll() . Un solo Array.prototype.reduce() luego equipa los encabezados con un atributo de id adecuado y también ensambla el html para la tabla de contenido:
document.querySelector('#toc').insertAdjacentHTML("beforeend","<ul>" +[...document.querySelector('#contents') .querySelectorAll("H1,H2,H3,H4,H5,H6")] .reduce((a,h)=>{ h.id=h.textContent.replaceAll(" ","_"); a.push(`<li class="l${h.tagName[1]}"><a href="#${h.id}">${h.textContent}</a></li>`); return a;}, [] ).join("\n") +"</ul>"); .l2 {margin-left:20px} .l3 {margin-left:40px} .l4 {margin-left:60px} .l5 {margin-left:80px} .l6 {margin-left:100px} #toc { border: 1px solid grey; padding: 6px } H1,H2 { margin-bottom:400px } <div id="toc"> Table of Contents </div> <div id="contents" class="blog-contents"> <h1>this is h1</h1> <h2>this is h2</h2> <h1 class="test" id="myid">Why won't this section appear?</h1> </div>