JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li menuid="1"> <span class="arrow collapsible expand">&nbsp;</span>
 <span><a href="#" name="basenode">ML034</a></span>

        <ul>
            <li menuid="338"> <span class="arrow collapsible expand">&nbsp;</span>
 <span><a href="#" name="basenode">DRUM RACK</a></span>

                <ul>
                    <li menuid="339"><span class="arrow">&nbsp;</span>
 <span><a href="#" name="basenode">000000001615</a></span>

                    </li>
                </ul>
            </li>
        </ul>

JavaScript

(function (elem, fun) {

    $(elem)
        .find(":not(iframe)")
        .addBack()
        .contents()
        .filter(function () {
        return this.nodeType === 3 && skipSpace(this.nodeValue) && fun(this.parentNode);
    });
})("ul:first", function(node) { node.style.color = "red"; });

function skipSpace(str) {
    var index = str.search(/^[\S]/);
    if (index === -1) {
        return "";
    }
    return str.slice(index);
}