JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <p>somecontent</p>
    <p>another content <span id="name-1" class=">321"><span id="name-2">content2 1232</span>content1 1231</span> 1234214</p>
</div>

CSS

.mathjaxfont {
    color: red;
}

#name-1 {
    text-decoration: underline;
}

#name-2
{
    color: blue;
}

JavaScript

$(document).ready(function()
{
    $('.content p').each(function()
    {
        $(this).html(handleHtml($(this).html()));
    });
});

function handleHtml(html)
{
    var resultHtml = "";
    var numberStr = "";
    var re = /[0-9]/;
    var isTag = false, quote = "";
    for (var i = 0; i < html.length; i++)
    {
        var char = html.substr(i, 1);
        if (!isTag && re.test(char))
        {
            numberStr += char;
        }
        else
        { 
            if (numberStr)
            {
                resultHtml += wrapNumber(numberStr);
                numberStr = "";
            }
            resultHtml += char;
            if (isTag && !quote && (char == '"' || char == "'"))
            {
                quote = char;
            }
            else if (quote && quote == char)
            {
                quote = "";
            }
            if (char == '<')
            {
                isTag = true;
            }
            else if (!quote && char == '>')
            {
                isTag = false;
            }
        }
    }
    if (numberStr)
    {
        resultHtml += wrapNumber(numberStr);
    }
    return resultHtml;
}

function wrapNumber(number)
{
    return '<span class="mathjaxfont">' + number+ "</span>";
}