XHTML DOM - 如何在 IE 上拆分标签？

Question

假设我有一个 html 文档的一部分，其中包含以下代码（基本结构）：

<p>
  <span class="1">This is my first content</span>
  <span class="2">This is my second content</span>
</p>

我想允许用户选择文本的一部分并向其应用一个新类。 假设用户在第一个跨度中选择“是我的第一个”，并应用类“3”。 我希望得到以下结果：

<p>
  <span class="1">This </span>
  <span class="3">is my first</span>
  <span class="1"> content</span>
  <span class="2">This is my second content</span>
</p>

我已经设法通过使用 execCommand“InsertHTML”在 Firefox 上执行此操作，但我找不到在 IE 中执行此操作的方法（IE9 之前） 我唯一的结果是一个嵌套的 span 元素，如下所示：

<p>
  <span class="1">This <span class="3">is my first</span> content</span>
  <span class="2">This is my second content</span>
</p>

您知道我如何实现这一目标吗？ 任何帮助将不胜感激！ 顺便说一句，如果这对您来说太简单了，那么您将如何处理用户选择跨越 2 个或更多跨度的文本部分的情况？超过 2 个或更多 ps ？

Answer 1

您可以使用选择范围获取选定的段。我建议使用 rangy，它是一个跨浏览器范围模块。

这里有一些使用 jQuery 和 Rangy 的“未经测试”的代码，希望能为您的第一种情况指明正确的方向：

var splitTag=function(class){
    var sel = rangy.getSelection();

    // this is your selection, in your example "is my first"
    var r0 = sel.getRangeAt(0);

    // create a new range       
    var r1 = rangy.createRange();
    // this would be your <p>
    var p = r0.endContainer.parentNode;

    // set the new range to start at the end of your phrase and to end at <p>
    r1.setStart(r0.endContainer, r0.endOffset);
    r1.setEnd(p, p.length-1);

    // extract the content of your first selection "is my first"
    var r0Txt=r0.toHtml();

    // make it into an span, with class set to "class argument" which would be 3 
    var newContent=$("<span/>").html(r0Txt).attr("class", class);

    r0.deleteContents();

    // insert the new node before r1
    r1.insertNode(newContent[0]);
    sel.removeAllRanges();
}

这应该可以为您提供第一种情况的结果。对于跨多个段落的选择，以下是代码的修改：

var splitTag=function(class){
    var sel = rangy.getSelection();

    var r0 = sel.getRangeAt(0);

    var r1 = rangy.createRange();
    var p = r0.endContainer.parentNode;

    r1.setStart(r0.endContainer, r0.endOffset);
    r1.setEnd(p, p.length-1);

    var r0Txt=r0.toHtml();

    if(!r0.startContainer===r0.endContainer){
        // the selection spans multiple dom's

        // set the class of all spans in the highlight to 3
        var newContent=$(r0Txt).find("span").attr("class",class);
    }else{
        var newContent=$("<span/>").html(r0Txt).attr("class", class);
    }

    r0.deleteContents();
    r1.insertNode(newContent[0]);
    sel.removeAllRanges();
}