javascript - 根据给定的标准重新排列 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>

由于一些用户文本操作，如复制/粘贴标准在 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 .