Good day gurus.
Please I am stuck at a spot in a pure JavaScript library that am writing.

One of the functions of the library is to auto bold any text that appears between . and :

For example;

1. Class A: This is class A. In class A, there are many other classes that we might discussed. For instance: Sub-categories of class A.

2. Class B: This is class B

A. Class C: This is class C.
B. Class D: This is class D.

i. Class E: This is class E.
ii. Class F: This is class F

What I want here is only text that appears between 1. and :, 2. and :, A. and :, B. and :, i. and :, ii. and : should be bold.

Note: I know this could be achieved via CSS if they were to be ul, ol items. But the script am writing should be able to bold any matches even if ul, ol are not used.

I have tried but mine will bold even matches found in middle of content which is not the purpose. Even if for instance, we “This is a . And here is a :”, I don’t want And here is a to be bold.

I don’t know if the explanation is clear but I will try and give more details upon request.

<script>
        window.onload = function() {
            // Get the text content of the div
            var text = document.getElementById("content").innerHTML;
            // Regex pattern to match the text between the number/letter and the colon
            var pattern = /(d+.|w.s?)([^:]+)(?=s*:)/g;
            // Replace matched text with bold tags around both the number/letter and the content after it
            var modifiedText = text.replace(pattern, function(match, p1a, p2a) {
                return "<b>" + p1a + "</b><b>" + p2a.trim() + "</b>";
            });
//alert(modifiedText);
            // Update the content of the element with the modified text          document.getElementById("content").innerHTML = modifiedText;
        };
    </script>

This image shows the preview of the script

From the image you can see aside the listed items bold, some part of the write were also bold which is not supposed to be so.

Thanks for your help