Использование Jquery, чтобы закончить элемент

Question

У меня есть следующий код, используя стройный, который позволяет пользователям применить класс к выделенному тексту:

<div><span>This is some text that users can select</span></div> 

Когда пользователь выбирает текст и применяет класс код превращается в:

<div><span>This is some <span class='someclass'>text</span> users can select</span</div> 

Мне нужен способ, чтобы закончить предыдущий поверочного тег первый, а затем создать новую после:

<div><span>This is some </span><span class='someclass'>text</span><span> users can select</span</div> 

В библиотеке rangy нет встроенного способа сделать это. Я попытался с помощью:

$('.someclass').before("</span>") 

и

$('.someclass').after("<span>") 

, но это не сработало.

Любые идеи?

Answer 1

Что-то, как это будет делать

$('.someclass').parent().each(function(){ 
    $(this).contents().each(function(){ 
     if(this.nodeType == 3){ 
      $(this).wrap('<span />') 
     } 
    }); 
    $(this).contents().unwrap() 
}) 

Демо: Fiddle

Answer 2

надеюсь, что это помогает

Дайте Див идентификатор позволяет говорить myDiv.

$(function(){ 
    var selectedText = ""; // Store the selected text in this variable 
    var indexOfText = $("#myDiv").text().indexOf(selectedText); 
    var originalString = $("#myDiv").text(); 
    var part1 = originalString.substring(0, indexOfText); 
    var part2 = originalString.substring(indexOfText + selectedText.length, originalString.length - 1); 
    var newString = "<span>" + part1 + "</span><span>" + selectedText + "</span><span>" + part2 + "</span>"; 
    $("#myDiv").empty(); 
    $("#myDiv").html(newString); 
}); 

Answer 3

Самый быстрый способ изменить код для обработки вставки класса диапазона в:

вставки перед выбором

</span><span class='someclass'>

и после выбора

</span><span>

Играть с surroundContents диапазона и:

var spanparent = $('div > span').get(0); 
var range = document.createRange(); 

// create <span>This is some </span> 
var startSpan = document.createElement("span"); 
range.setStart(spanparent,0); 
range.setEnd(spanparent,1); 
range.surroundContents(startSpan); 

// create <span> users can select</span> 
var endSpan = document.createElement("span"); 
range.setStart(spanparent,2); 
range.setEnd(spanparent,3); 
range.surroundContents(endSpan); 

//result: 
//<div> 
// <span> 
//  <span>This is some </span> 
//  <span class="someclass">text</span> 
//  <span> users can select</span> 
// </span> 
//</div> 

// remove the outer span 
var contents = $(spanparent).html(); 
$(spanparent).replaceWith(contents);