jQuery select text and add span to it in an paragraph

Question

I have a function that gets the selected text, the text is selected by mouse, and add it into a variable. I want to add tags around that variable in the selected text - in that paragraph.

$("p").live("mouseup",function() {
    selection = getSelectedText();
    if(selection.length >= 3) {
        var $spn = $("<span></span>").html(selection).addClass("selected");
        $("p").wrap($spn);
    }
});

//Grab selected text
function getSelectedText(){
    if(window.getSelection){
        return window.getSelection().toString();
    }
    else if(document.getSelection){
        return document.getSelection();
    }
    else if(document.selection){
        return document.selection.createRange().text;
    }
}

I can get the text selection variable but instead of placing the <span></span> around the selected text from the paragraph <p>, my function wraps this outside.

How can I replace it in the paragraph? Thank you.

Solution 1

This is where it goes wrong:

var $spn = $("<span></span>").html(selection).addClass("selected");
$("p").wrap($spn);

This means you’re wrapping the span around the paragraph.

I think you mean to do something like this:

var spn = '<span class="selected">' + selection + '</span>';
$(this).html($(this).html().replace(selection, spn));

Solution 2

Try to trim the selection and replace html-internal line breaks. This helps a lot:

$('#tweet_contents').live("mouseup",function() {
    selection = getSelectedText().replace(/^\s+|\s+$/g,"");

    if(selection.length >= 4) {
        var spn = '<span id=\"selected\" class=\"polarite\"  selcount=\"'+selcounter+'\" >'+selection+'<span id=\"superscript\">'+selcounter+'<\/span>'+'<\/span>';

    $(this).html( $(this).html().replace(/(\r\n|\n|\r)/gm," ").replace(selection, spn ) ); 
    }
});

Solution 3

Use .wrapInner() instead of .wrap()

Comments

[tvanfosson]

$spn is jQuery, not a string.

[tvanfosson]

$spn is jQuery, not a string.

[glmxndr]

This wouldn't work if, for example, I selected text accross several tags. If the p is like this : <p>Some <i>text</i></p> and I select 'ome tex', your method won't replace anything.

[tvanfosson]

@subtenante - I know -- I noted this at the end of the answer, though it could work if the selection algorithm was modified to find the matching section of the DOM and select the entire html (not text). For a simple paragraph containing only text it would work (once).

[Mircea]

I use this: $(document).ready(function(){ $("p").live("mouseup",function() { selection = getSelectedText(); if(selection.length >= 3) { var $spn = $("<span></span>").html(selection).addClass("selected"); $(this).html($(this).html().replace(selection, $spn)); } }); It seems that I lost my variabile, the selection in paragraph works but It is replaced with [object Object] text - no span

[Mircea]

My text gets replaced with [object Object], without <span>. Is there something wrong with my variable?

[Mircea]

works better, now I get: &lt;span class="selected"&gt;selected&lt;/span&gt; The span does not parse right, i get &gt; rather then <>

[glmxndr]

Yes, I just made explicit the reason why it wouldn't work. :)

[Mircea]

I am trying to encode the string but it does not work: $(this).text($(this).html().replace(selection, spn).replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt‌​;/g,'>'));

[Mircea]

Got it! $(this).html($(this).html().replace(selection, spn)); I had changed text to html. Thank you all foryour support!

[MS6]

Oh, my bad... I just looked into the replacement part, I supposed the rest already worked.

[rebellion]

This code also has a bug. If you have multiple occurences of a word, this code will always wrap the first occurence of the word, not the actual selected text.