Văn bản được đánh dấu bằng jQuery bao quanh với SPAN

Question

Đoạn mã sau được cho là bao quanh văn bản được đánh dấu trong một Div đã cho với một khoảng.

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

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

    }); 
}); 

Một chức năng có thể được sử dụng để cung cấp tùy chọn định dạng cho nội dung HTML có thể chỉnh sửa DIV.

Điều gì đó rõ ràng là sai mặc dù hiện tại nó không hoạt động.

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

Answer 1

Vâng, trước hết, bạn phải html của bạn sai, một cái gì đó như thế này
<a href="" class="format">test</div>

Thứ hai, khi bạn cố gắng để kích kiểm tra nó bỏ chọn văn bản đã chọn vì đây là những gì sẽ xảy ra nếu bạn bấm vào một nơi nào đó khi bạn có một số văn bản được chọn. Vì vậy, với điều này trong tâm trí, tôi đã thay đổi nó thành $("body").keypress() vì vậy nó sẽ quấn văn bản được đánh dấu trong span khi một phím được nhấn. Ngoài ra, cố định một số mã jQuery và thì đấy, nó hoạt động!

Khám phá here.

Nếu bạn khắc phục thẻ neo của bạn và jQuery của bạn một chút $(".contenttext").contents() nơi .contents() là một hàm phi existand để
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
nó hoạt động như mong đợi như đã thấy 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)); 
    }); 
}); 

Sau Sửa:

Dựa trên những nhận xét, đây là thực ví dụ chức năng:

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

Tài liệu: https://developer.mozilla.org/en-US/docs/Web/API/window.getSelection