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

【问题标题】：jQuery surround highlighted text with SPANjQuery 用 SPAN 环绕突出显示的文本
【发布时间】：2013-07-24 01:48:17
【问题描述】：

下面的代码应该在给定的 Div 中用 span 包围突出显示的文本。

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

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

    });
});

这种性质的函数可用于为 HTML 内容可编辑 DIV 提供格式选项。

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

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

【问题讨论】：

.replace 不适用于类似数组的对象，除非您将其明确定义为该对象的方法。 .content() 也不存在。你检查控制台了吗？

标签： jquery replace highlight

【解决方案1】：

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

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

【讨论】：

非常好！但是，它只会替换文档中匹配文本的第一个实例。例如，如果您选择“it”的一个实例，第一个实例将始终添加跨度。

【解决方案2】：

嗯，首先，你的 html 有误，类似这样
<a href="" class="format">test</div>

其次，当您尝试单击测试时，它会取消选择选定的文本，因为如果您在选择了某些文本时单击某处会发生这种情况。因此，考虑到这一点，我将其更改为$("body").keypress()，以便在按下键时将突出显示的文本包装在 span 中。此外，修复了一些 jQuery 代码，瞧，它可以工作了！

查看here。

如果你稍微修复一下你的锚标签和你的 jQuery $(".contenttext").contents() 其中.contents() 是一个不存在的函数
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
正如here 所见，它按预期工作。

【讨论】：

非常好！但是，它只会替换文档中匹配文本的第一个实例。例如，如果您选择“it”的一个实例，第一个实例将始终添加跨度。