JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>

CSS

p {
    background-color: rgba(255, 0, 0, 0.5);
}
ul {
    background-color: rgba(0, 255, 0, 0.5);
}

JavaScript

var beginRegex = new RegExp(/<p>(((?!<\/p>).|[\r\n])*?)<ul>/gi);
var endRegex = new RegExp(/<\/ul>(((?!<p>).|[\r\n])*?)<\/p>/gi);

var content = '    <p>some text\n        <ul>\n            <li>A</li>\n            <li>2</li>\n        </ul>another text</p>\n    <p>asdf sd</p>s as\n    <p>f\n        <ul></ul>\n    </p>\n    <p></p>';

$('#target')
    .html(content.replace(beginRegex, '<p>$1</p><ul>')
    .replace(endRegex, '</ul><p>$1</p>'));