jquery使用SPAN圍繞突出顯示的文本

Question

下面的代碼應該圍繞給定div中突出顯示的文本以跨度顯示。

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

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

    }); 
}); 

這種性質的函數可以用來提供格式化選項到HTML contenteditable DIV。

有些東西顯然是錯誤的，因爲它目前沒有工作。

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

Answer 1

嗯，首先，你有你的HTML錯誤的，這樣的事情
<a href="" class="format">test</div>

其次，當你試圖點擊測試取消選中的文本，因爲這是，如果發生了什麼當你選擇了一些文本時，你點擊某處。因此，考慮到這一點，我將其更改爲$("body").keypress()，以便在按下某個鍵時將跨度中突出顯示的文本包裹起來。另外，修復了一些jQuery代碼和瞧，它的工作原理！

看看吧here。

如果您解決您的錨標記和你的jQuery有點 $(".contenttext").contents()其中.contents()是一個非existand功能
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
它的工作原理像預期的那樣看到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)); 
    }); 
}); 

後來編輯：

基礎上的評論，這纔是真正的功能例如：

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); 
    }); 
}); 

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