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。

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

1 个答案: