使用SPAN jQuery环绕高亮显示的文本

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

以下代码应该围绕具有跨度的给定Div中的突出显示文本。

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

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

    });
});

A function of this nature could be used to provide formating options to an HTML contenteditable DIV.

这种性质的函数可用于为HTML可信任的DIV提供格式化选项。

Something is clearly wrong though as it does not currently work.

有些事情显然是错误的，因为它目前不起作用。

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

2 个解决方案

#1

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

演示：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));
    });
});

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 = '<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

文档：https：//developer.mozilla.org/en-US/docs/Web/API/window.getSelection

#2

Well, first off, you had your html wrong, something like this
<a href="" class="format">test</div>

好吧，首先，你有你的HTML错误，像这样的 test

Secondly, when you tried to click test it deselected the selected text because this is what happens if you click somewhere when you have some text selected. So, with this in mind, I changed it to $("body").keypress() so it will wrap the highlighted text in span when a key is pressed. Also, fixed some of the jQuery code and voila, it works!

其次，当您尝试单击测试时，它取消选择所选文本，因为如果您在选择了某些文本时单击某处，则会发生这种情况。因此，考虑到这一点，我将其更改为$（“body”）。keypress（）因此，当按下某个键时，它将在span中包装突出显示的文本。此外，修复了一些jQuery代码和瞧，它的工作原理！

~~Check it out here.~~

看看这里。

If you fix your anchor tag and your jQuery a bit $(".contenttext").contents() where .contents() is a non-existand function to
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
it works as expected as seen here.

如果你修改你的锚标签和你的jQuery有点$（“。contenttext”）。contents（）其中.contents（）是$（“。contenttext”）的不存在和函数.html（$（“。contenttext”））.html（）。replace（highlight，spn））;它按预期工作，如此处所见。

#1