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();
}

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

1 个答案: