JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span>

<div id="result"></div>

CSS

#result {margin-top: 50px;}
.label {color: blue;}

JavaScript

$(".fillmeout").each(function() {
    var node = this.firstChild, prefix = "", suffix = "", foundSpan = false;
    while (node) {
        if (node.nodeType == 3) {
            if (!foundSpan) {
                prefix += node.nodeValue;
            } else  {
                suffix += node.nodeValue;
            }
        } else if (node.nodeType == 1 && node.tagName == "SPAN") {
            foundSpan = true;
        }
        node = node.nextSibling;
    }
    // here prefix and suffix are the text before and after the first
    // <span> tag in the HTML
    document.getElementById("result").innerHTML = 
        '<span class="label">prefix:</span> "' + prefix + '"<br>' +
        '<span class="label">suffix:</span> "' + suffix + '"<br>';
});