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> 

мне удалось сделать это на Firefox с помощью ExecCommand «InsertHTML», но я не могу найти способ сделать это в IE (до IE9) единственный результат у меня есть вложенная оболочка элемента, как показано ниже:

<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 или более пс?

Answer 1

вы можете получить выбранный сегмент с использованием диапазона выбора. Я бы рекомендовал использовать rangy, который представляет собой модуль диапазона кросс-браузера.

Вот некоторые «непроверенный» код, с помощью JQuery и стройный, мы надеемся, направить вас в правильном направлении, для первого случая:

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