jQuery用SPAN环绕突出显示的文本

下面的代码应该在给定Div中突出显示的文本周围加上一个span

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

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

    });
});

$（文档）.ready（函数（）{
$（'.format'）。单击（函数（）{
var highlight=window.getSelection（）；
变量spn=''+突出显示+''；
$（'.conttext'）.content（）.replace（高亮显示，spn）；
});
});

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

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

---

首先，你的html搞错了，类似这样的

如果您稍微修改一下锚定标记和jQuery
$（“.contenttext”）.contents（）
其中
.contents（）
是
$（.contenttext”）.html（$（.contenttext”）.html（）的不存在函数。替换（突出显示，spn））

如图所示，它可以正常工作。
演示：

$（文档）.ready（函数（）{
$（'.format'）。单击（函数（）{
var highlight=window.getSelection（）；
变量spn=''+突出显示+''；
var text=$（'.conttext'）.text（）；
$（'.conttext'）.html（text.replace（highlight，spn））；
});
});

以后编辑：

根据评论，这是真正的功能示例：


$（文档）.ready（函数（）{
$（'.format'）。单击（函数（）{
var highlight=window.getSelection（），
spn=“”+突出显示+“”，
text=$（'.conttext'）.text（），
范围=高亮显示。getRangeAt（0），
startText=text.substring（0，range.startOffset），
endText=text.substring（range.endOffset，text.length）；
$（'.conttext'）.html（startText+spn+endText）；
});
});

文档：
。除非您专门将其定义为类似数组的对象的方法，否则替换不适用于该对象。content（）也不存在。你检查控制台了吗？很好！但是，它将仅替换文档中匹配文本的第一个实例。例如，如果您选择“it”的一个实例，第一个实例将始终获得添加到其中的跨度。非常好！但是，它将仅替换文档中匹配文本的第一个实例。例如，如果选择“it”的一个实例，则第一个实例将始终获得添加到其中的跨度。
$(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));
    });
});

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