Javascript 根据给定的标准重新排列DOM元素

我将尝试描述这个问题：

我正在使用contenteditable编辑DIV中的文本。我需要在该DIV中包含的元素的标准是：

第段：

<p style="someStyles"><span style="someStyles">TEXT GOES HERE</span></p>

文本位于此处

空行：

<p style="someStyles"><span style="someStyles"><br></span></p>

由于一些用户文本操作（如复制/粘贴）在该DIV中出现混乱，如此处所示（示例）：

这里有一些文本
这里有一些文本

我在寻找一个解决方案，将采取混乱的文本元素，并重新安排到给定的标准，我写了上述，有什么建议

重新排列元素后，应如下所示：

<p style="someStyles">
    <span style="someStyles">SOME TEXT HERE</span>
    <span style="someStyles">SOME TEXT HERE</span>
</p>

这里有一些文字
这里有一些文字

---

我想在键入时对keyup事件执行重排函数，并且只对插入符号打开的整个p元素执行重排函数

正如我在评论中所说的，我看不出一个通用的解决方案，但是你的具体例子可以这样解决。你可以很容易地在这个基础上进行其他的转换

replace

功能基于

//这会将一个元素转换为另一个标记
函数替换（thisWith，that）{
$（thisWith）.replaceWith（函数（）{
变量i，替换=$（''）.html（$（this.html（））；
对于（i=0；i

---

这是一个测试。

您忘记粘贴您尝试的代码。展示一个可以重现问题的示例可能会有所帮助。如何添加SPAN元素和类？用户可能会以无限多的方式破坏您的标准。您给出了一个示例（可以解决），但如果我理解正确，您要求的算法可以将任何类型的混乱转换为您的标准（无法解决）。@RokoC.Buljan文本与上述段落相同，中间有空行。我将尝试提供更多的例子。它在该案例中起到了预期的作用，但这就是问题所在。谢谢！

<p style="someStyles">
    <span style="someStyles">SOME TEXT HERE</span>
    <span style="someStyles">SOME TEXT HERE</span>
</p>

// this converts an element to another tag
function replace(thisWith, that) {
    $(thisWith).replaceWith(function() {
        var i, replacement = $('<' + that + '>').html($(this).html());
        for (i = 0; i < this.attributes.length; i++) {
            replacement.attr(this.attributes[i].name, this.attributes[i].value);
        }
        return replacement;
    });
}

function convert() {
    // get SPANs that has Ps inside
    var $spans = $("#content span").has("p");
    $spans.each(function () {
        // change children Ps into SPANs
        replace($(this).children("p"), "span");
        // change parent SPAN into P
        replace(this, "p");        
    });
}