Using Jquery to end an element

Question

I have the following code using rangy, which allows users to apply a class to selected text:

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

When a user selects text and applies a class the code turns into:

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

I need a way to end the previous span tag first and then create a new one after:

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

The rangy library does not have a built in way to do this. I tried using:

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

and

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

but that did not work.

Any ideas?

So if I understand correctly, if the user selects text, and that text is within the span, you want to split the current span into x spans (max would be 3) — Nix, Jun 25 '13 at 13:15
yes sir, that is correct - as opposed to having the new user-selected span nested inside the parent span. — RyanY, Jun 25 '13 at 13:18

arifnpm · Answer 1 · 2013-06-26T04:02:52.113

The fastest way is to change the code for handling the span class insertion into:

insert before selection

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

and after selection

</span><span>

Play with range and 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);

I am not sure that I can change the library like that. It certain would be ideal. — RyanY, Jun 25 '13 at 23:36

score 1 · Accepted Answer · answered Jun 26 '13 at 03:52

1

Something like this will do

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

Demo: Fiddle

answered Jun 26 '13 at 03:52

Arun P Johny

384,651
66
527
531

Worked perfectly, what a fabulous solution. Thanks – RyanY Jun 26 '13 at 11:19

score 0 · Answer 3 · answered Jun 25 '13 at 14:04

hope this helps

Give the div an id of lets say 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);
});

Using Jquery to end an element

3 Answers3