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

Question

我会尝试描述问题：

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

段落：

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

空行：

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

由于像 copy/paste 这样的一些用户文本操作，标准被弄乱了 DIV 就像这里（例如案例）：

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

我正在寻找一种解决方案，可以将混乱的文本元素重新排列为我在上面写的给定标准，有什么建议吗？

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

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

P.S - 我想在键入时对 keyup 事件进行重新排列功能，并且仅针对插入符所在的整个 p 元素。

Answer 1

正如我在评论中所述，我看不到对此的通用解决方案，但您的具体示例可以这样解决。并且您可以轻松地基于此进行其他几种转换。

replace函数基于this answer。

// 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");        
    });
}

这是一个测试jsfiddle。

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

Rearrange DOM elements according to given standard

javascript

jquery

html

contenteditable