JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
    Some text here which is not wrapped in tags
    <p>Some more text which is fine</p>
    <p>Blah blah another good line</p>
</div>

CSS

div {
    margin: 1em;
}
div p {
    outline: 1px dotted #dcdcdc;
    margin: 1em 0;
}
div p:before {
    content: "<p>";
    color: silver;
}
div p:after {
    content: "</p>";
    color: silver;
}

JavaScript

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], whitespace = /^\s*$/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || !whitespace.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

var textnodes = getTextNodesIn($("#demo")[0]);
for(var i=0; i < textnodes.length; i++){
    if($(textnodes[i]).parent().is("#demo")){
        $(textnodes[i]).wrap("<p>");
    }
}