JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

var content = '<p>no<ul><li>List item D</li></ul><ol><li>List item 1</li></ol> limits</p>';

var beginRegexUl = new RegExp(/<p>(((?!<\/p>).|[\r\n])*?)<ul>/gi);
var endRegexUl = new RegExp(/<\/ul>(((?!<p>).|[\r\n])*?)<\/p>/gi);
var beginRegexOl = new RegExp(/<p>(((?!<\/p>).|[\r\n])*?)<ol>/gi);
var endRegexOl = new RegExp(/<\/ol>(((?!<p>).|[\r\n])*?)<\/p>/gi);

$('#target')
    .html(content.replace(beginRegexUl, '<p>$1</p><ul>')
    .replace(endRegexUl, '</ul><p>$1</p>')
    .replace(beginRegexOl, '<p>$1</p><ol>')
    .replace(endRegexOl, '</ol><p>$1</p>'));