JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<h1>This is an H1</h1>
<p>Bla bla bla bla bla bla.</p>
<h2>This is an H2</h2>
<p>Bla bla bla bla bla bla.</p>
<h3>Header 3</h3>
<p>Bla bla bla bla bla.</p>

<div id="div-toc">(Table of contents should appear here)</div>

CSS

h1, h2, h3, h4, h5 { font-weight: bold; }

JavaScript

function epiQuickTOC() {

            
            
            var body = $('#content').val();
        
        // alert( body );

            // var headers = $(body).filter('h1, h2, h3, h4, h5, h6');
            var headers = $(body).filter(':header');

            

            
            headers.each(function(){
                $(this).wrap('<li class="'+ this.nodeName.toLowerCase() +'">');
                // alert('Header title: ' + $(this).html() );
            });
            
            
            // headers = headers.html();
            headers = headers.clone().wrap('<div>').parent().html();
            
            
            
            alert( headers );


            return headers;


        }
        
        
        
        
        
        
        
        // var toc22 = epiQuickTOC().html();
        var toc22 = epiQuickTOC();
        
        alert('epiQuickTOC() is' + toc22 );
        
        $("#iframe-toc").contents().find("body").html('<h1>testtttttt</h1>' + toc22 );
        $("#div-toc").html('<h1>testtttttt</h1>' + toc22 );
        // $("#iframe-toc").contents().find("body").html('<h1>testtttttt</h1>' );

    });

});