jQuery surround podświetlony tekst z SPANEM

Question

Poniższy kod ma otaczać podświetlony tekst w danym dziale D o rozpiętości.

$(document).ready(function(){ 
    $('.format').click(function(){ 
     var highlight = window.getSelection(); 

     var spn = '<span class="highlight">' + highlight + '</span>'; 
     $('.conttext').content().replace(highlight, spn); 

    }); 
}); 

Funkcja tego rodzaju może zostać wykorzystana do zapewnienia opcji formatowania do DIV z treścią zgodną z HTML.

Coś jest jednak nie w porządku, ponieważ obecnie nie działa.

http://jsfiddle.net/BGKSN/20/

Answer 1

Cóż, po pierwsze, trzeba było html złego, coś takiego
<a href="" class="format">test</div>

drugie, kiedy próbował kliknij przetestować to odznaczone zaznaczony tekst, bo to jest to, co się dzieje, jeśli klikniesz gdzieś, gdy masz zaznaczony jakiś tekst. Tak więc, mając to na uwadze, zmieniłem go na $("body").keypress(), aby po naciśnięciu klawisza zawinął podświetlony tekst w zakresie. Naprawiono też część kodu jQuery i voila, to działa!

Sprawdź to here.

Jeśli naprawić swój znacznik zakotwiczenia i swoją jQuery nieco $(".contenttext").contents() gdzie .contents() jest non-existand funkcja
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
to działa zgodnie z oczekiwaniami, jak widać here.

Answer 2

DEMO: http://jsfiddle.net/BGKSN/24/

$(document).ready(function(){ 
    $('.format').click(function(){ 
     var highlight = window.getSelection(); 
     var spn = '<span class="highlight">' + highlight + '</span>'; 
     var text = $('.conttext').text(); 
     $('.conttext').html(text.replace(highlight, spn)); 
    }); 
}); 

Później Edit:

oparciu o komentarz, to jest prawdziwy przykład funkcjonalne:

http://jsfiddle.net/BGKSN/40/

$(document).ready(function(){ 
    $('.format').click(function(){ 
     var highlight = window.getSelection(), 
     spn = '<span class="highlight">' + highlight + '</span>', 
     text = $('.conttext').text(), 
     range = highlight.getRangeAt(0), 
     startText = text.substring(0, range.startOffset), 
     endText = text.substring(range.endOffset, text.length); 

     $('.conttext').html(startText + spn + endText); 
    }); 
}); 

Dokumenty: https://developer.mozilla.org/en-US/docs/Web/API/window.getSelection