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可信任的DIV提供格式化选项。

有些事情显然是错误的，因为它目前无效。

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

Answer 1

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

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

Answer 2

嗯，首先，你的HTML有错误，就像这样 <a href="" class="format">test</div>

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

~~检查出here。~~

如果您修复了锚标记和jQuery $(".contenttext").contents()其中.contents()不存在，而$(".contenttext").html($(".contenttext").html().replace(highlight, spn));的功能为{{1}} 它按预期here运行。

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

2 个答案: