jQuery surround highlighted text with SPAN

Question

The following code is supposed to surround the highlighted text in a given Div with a span.

$(document).ready(function(){
    $(\'.format\').click(function()         


        

Answer 1

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

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

Later Edit:

Based on the comment, this is the real functional example:

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

$(document).ready(function(){
    $('.format').click(function(){
        var highlight = window.getSelection(),  
        spn = '' + highlight + '',
        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);
    });
});

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