JavaScript-选择的拆分父级

使用JavaScript（可能还有）我试图创建一个实用函数，该函数允许我根据传入的选择和选择器“拆分”元素。例如，假设我们有以下内容：

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some cool</span> stuff.
        <p>
    </div>
</div>

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some</span>
        <p>
        <p>
            <span style="color: pink;"> cool</span> stuff.
        <p>
    </div>
</div>

这将产生以下结果：

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some cool</span> stuff.
        <p>
    </div>
</div>

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some</span>
        <p>
        <p>
            <span style="color: pink;"> cool</span> stuff.
        <p>
    </div>
</div>

将产生以下结果：

<div class="designer" contenteditable="true">
    <div class="content">
        <p>
            Here is <span style="color: pink;">some</span>
        <p>
    </div>
    <div class="content">
        <p>
            <span style="color: pink;"> cool</span> stuff.
        <p>
    </div>
</div>

这里有一些


很酷的东西。

我还没能想出一个直截了当的方法来实现这一点。有什么想法吗