find_and_replace_heading_levels.js

document.addEventListener("DOMContentLoaded", function () {
    /*
     * Find any insteances of the selector in oldTag and replace it with the tag from newTag.
     */
    function replaceHeadingLevel(oldTag, newTag) {
        document.querySelectorAll(oldTag).forEach(function (element) {
            var newHeading = document.createElement(newTag);
            newHeading.innerHTML = element.innerHTML;

            // Copy attributes from old heading to new heading.
            Array.from(element.attributes).forEach(attr => {
                newHeading.setAttribute(attr.name, attr.value);
            });

            element.replaceWith(newHeading);
        });
    }

    // Change all H2s inside blog posts to H3s.
    replaceHeadingLevel(".post-content h2", "h3");

    // Change all H4s to H2s.
    replaceHeadingLevel(".post-content h4", "h2");
});