Winer Links using Javascript, Styles, and CSS

WinerLinks.html

<style>
    /* The link is a Dave Winer Link */
    .Winerlink {
        cursor: auto;
        display: inline;
        height: auto;
        line-height: 30px;
        text-decoration: none;
        text-decoration-line: none;
        width: auto;
        float: right
    }
    .WinerAnchor {
        /* So as to ensure that its not at the top of the page where menu bars might be on top of it*/
        scroll-margin-top: 100px;
    }
</style>

<script>
    function addAnchorTagsToParagraphs(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const paragraphs = doc.querySelectorAll("p");

    paragraphs.forEach((paragraph) => {
        const paragraphText = paragraph.textContent.trim();
        const words = paragraphText.split(" ");
        const firstFiveWords = words.slice(0, 5).join(" ");
        const firstFiveLetters = concatenateFirstLetters(firstFiveWords);

        // Create the opening anchor tag
        const openingAnchor = doc.createElement("a");
        openingAnchor.classList.add("WinerAnchor");
        openingAnchor.id = firstFiveLetters;
        openingAnchor.name = firstFiveLetters;
        paragraph.insertBefore(openingAnchor, paragraph.firstChild);

        // Create the closing anchor tag
        const closingAnchor = doc.createElement("a");
        closingAnchor.href = `#`+firstFiveLetters;
        closingAnchor.textContent = `¶`;
        closingAnchor.classList.add("Winerlink");
        paragraph.appendChild(closingAnchor);
    });

    return doc.documentElement.innerHTML;
    }

    function concatenateFirstLetters(text) {
        const words = text.split(" ");
        const firstFiveWords = words.slice(0, 5);
        const firstLetters = firstFiveWords.map(word => word.charAt(0).toUpperCase());

        while (firstLetters.length < 5) {
            // Add a null character to the array in the event that there are less than 5 words.  Not the best, but it should work.
            firstLetters.push('␀');
        }

        const concatenatedLetters = firstLetters.join("").toLowerCase();

        return concatenatedLetters;
    }


</script>

<!-- Post Content -->
<span class="e-content" id="main_content">{{ content }}</span>

<script>
    var main_content = document.getElementById('main_content');
    main_content.innerHTML = addAnchorTagsToParagraphs(main_content.innerHTML);
</script>