Question

我试图在多个范围内选择/突出显示文本（例如，如果您在某些文本中单击+拖动鼠标会发生什么）。

这是一个小提琴，展示了我想做但却无法做到的事情 http://jsfiddle.net/KcX6A/2816/

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

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

Answer 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

Answer 2

事实证明，除了firefox之后，除了挖掘更多内容之外，所有主流浏览器仍然无法实现。这里有1个来源http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-January/030102.html

感谢您的帮助！

Answer 3

使用 highlight plugin 简单

参见 updated fiddle

并使用代码

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

    });

JQuery：选择/突出显示多个范围内的文本

3 个答案: