JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div ID="testcontainer">
    <div style="border:1px solid blue;" class="slJobDuties">
        <div style = "border:1px solid red;" class="ExternalClass936C2C07EC22467780317A758292E763">
            <div style="url:'http://www.udel.edu'">
            <p style='font-weight:bold;'>
                Text <a href=".">Outside</a> <i>Spans</i>
                <span class="bob">
                Test Inside one span, outside of others
                <span style="border:1px solid black;">
                <span style="border:1px solid orange;" class="bob">
                <span class="bob" style="border:1px solid orange;">
                    College <i><a href=".">Accounting</a></i> <span><b>Style</b></span>
                    <br />
                    More stuff
                </span>
                </span>
                </span>
                </span>
            </p>
            </div>
        </div>
    </div>
</div>

JavaScript

function cleanHTML(theObject, allowedTags) {
    for (i = $(theObject).find('*').length - 1; i >= 0; i--) {
        if ($.inArray($($(theObject).find('*')[i]).get()[0].tagName.toLowerCase(), allowedTags) == -1) {
            $($(theObject).find('*')[i]).replaceWith($($(theObject).find('*')[i]).html());
        }
    }
}
console.log($("#testcontainer").html()); //Handy Debugging line - show me the HTML before I do stuff
cleanHTML($("#testcontainer"), ["a", "br", "p"]);
console.log($("#testcontainer").html()); //Handy Debugging line - show me the HTML AFTER I do stuff