Convert h2 and h3 heading into table of content convertible structure in WIX

README.md

Use convertToToc.js to parse blog post to toc then generate toc html file with table_of_content_template.html.

What must be changed?

H2 Heading

id, innerText

H3 Heading

id, href, innerText

convertToToc.js

var toc = [];
var h2 = document.getElementsByTagName('h2');
for (var i = 0; i < h2.length; i++) {
    if (h2[i].innerText !== 'Comments') {
        var tocEl = {h2: h2[i], h3: []}
        var element = h2[i].nextSibling;
        while (element !== null && element.tagName !== 'H2') {
            if (element.tagName === 'H3' && element.innerText.trim() !== '') {
                tocEl.h3.push(element)
            }
            element = element.nextSibling;
        }
        toc.push(tocEl)
    }
}

gistfile1.txt

f

table_of_content_template.html

<!-- Root Toc -->
<!-- Change id, index -->
<div id="wq9h742hw" index="0">
    <div class="Z0Us8" style="">
        <div role="button" tabindex="-1" class="Qgcxu" data-hook="ExpandCollapseButton_0">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="button"
                tabindex="0" aria-label="Item is expanded" class="Rh1Jd phmA7">
                <g fill-rule="evenodd">
                    <g>
                        <g>
                            <g>
                                <g>
                                    <path d="M11.999 9L6 14.241 6.657 15 11.999 10.334 17.343 15 18 14.241z"
                                        transform="translate(-129 -185) translate(97 105) translate(23 71) rotate(-90 21 12) matrix(1 0 0 -1 0 24)">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
        <div class="_7zRv0">
            <div class="itVXy _8a1b4" dir="ltr">
                <div class="mhGZq">
                    <!-- H2 Heading -->
                    <!-- Change id, innerText -->
                    <p id="viewer-km1q"
                        class="xVISr Y9Dpf OZy-3 lnyWN public-DraftStyleDefault-block-depth0 fixed-tab-size public-DraftStyleDefault-text-ltr">
                        <span class="B2EFF public-DraftStyleDefault-ltr">
                            <span>H2 HEADING</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="fsX5d">
        <div class="itVXy _8a1b4" dir="ltr">
            <div class="mhGZq">
                <!-- H3 Heading -->
                <!-- Change id, href, and innerText -->
                <p id="viewer-1hjth"
                    class="xVISr Y9Dpf OZy-3 lnyWN public-DraftStyleDefault-block-depth0 fixed-tab-size public-DraftStyleDefault-text-ltr">
                    <span class="B2EFF public-DraftStyleDefault-ltr">
                        <span>
                            <a data-hook="anchorViewer" href="#viewer-7d9eh" target="_self" rel="noopener noreferrer"
                                class="TWoY9 itht3">
                                <span style="color: rgb(42, 42, 42);">
                                    <u class="D-jZk">H3 HEADING 1</u>
                                </span>
                            </a>
                        </span>
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>