JQuery：跨多个范围选择/突出显示文本答案

【问题标题】：JQuery: Select/Highlight text across multiple rangesJQuery：跨多个范围选择/突出显示文本
【发布时间】：2014-05-31 06:16:28
【问题描述】：

我正在尝试跨多个范围选择/突出显示文本（例如，如果您在某些文本上单击并拖动鼠标会发生什么情况）。

这是一个演示我想做但无法做的小提琴 http://jsfiddle.net/KcX6A/2816/

我尝试将SelectText("selectme2"); 添加到 JQuery，但随后它取消选择第一个 div。

我从这里得到了这个方法 Selecting text in an element (akin to highlighting with your mouse) 但它只选择一个范围。

【问题讨论】：

标签： jquery select highlight

【解决方案1】：

试试这个方法，不知怎的，它在 Firefox 中可以正常工作，但在 Chrome 中却不行，可能是浏览器兼容性问题..

HTML -

<div class="selectme">Some text to highlight</div>
<div> Don't select this </div>
<div class="selectme">Select this text too.</div>
<br>
<p>Click me!</p>

Javascript-

function SelectText(element) {
    var strongs = document.getElementsByClassName(element);
    var s = window.getSelection();
    if(s.rangeCount > 2) s.removeAllRanges();

    for(var i = 0; i < strongs.length; i++) {
         var range = document.createRange();
         range.selectNode(strongs[i]);
         s.addRange(range);
    }
}

$(document).ready(function(){
    $('p').click(function() {
        myClass="selectme";
       SelectText(myClass);   
    });
});

这是现场直播JSfiddle example

【讨论】：

这正是我想要的，但你是对的，它不适用于 Chrome。

【解决方案2】：

事实证明，这在所有主要浏览器中仍然是不可能的，除了 firefox，经过更多研究之后。这里有 1 个来源 http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-January/030102.html

感谢您的帮助！

【讨论】：

【解决方案3】：

使用highlight plugin简单

见updated fiddle

并使用代码

$('p').click(function() {
       $("div").highlight("highlight");

    });

【讨论】：

我认为他想将其用于copy，而您的解决方案将无济于事
Rituraj，感谢您的尝试，但迈克尔是对的，我想使用突出显示/选择来复制文本，而不是突出显示它。