Non-continuous selections in chrome?

Question

Update

I recently discovered you can programatically create selections with Chrome which aren't continuous, by either replacing elements / textnodes inbetween in the parts you want unselected or hiding and then showing them.

Example of non-continuous selections for Chrome: http://jsfiddle.net/niklasvh/YKJBW/

var t = $('div').contents().get(0);


$.each(t.nodeValue.split(" "),function(i,e){
   t = t.splitText(e.length);
     if (t.length>0){
     t = t.splitText(1);
     }
});



var c = $('div').contents();

$.each(c,function(i,e){    
    if (i>0){
    if (i%3) { }else{
             e.parentNode.replaceChild($('<unselect />').text(e.nodeValue).get(0),e);                           
    }    
}   
});

$('unselect').hide(); 
window.setTimeout(function(){
   $('unselect').show();     
},0);

However when performing the copy event, the whole selection does get selected (even if it has gaps in-between), but of course the same method can be used to programatically alter the selection before the copy event is performed.

The tricky part now is that can you actually make this functionality usuable by holding Ctrl down like you can in Firefox to create non-continous selections. The current method I use in the example breaks the TextNodes into many pieces, which for visual purposes does no difference. It however, also uses additional tags to break the selection, which as far as I've discovered, cannot be removed. However, the same functionality can be reached by deleting TextNodes and adding new ones in place for them. The problem is that it will only take into account the last node added, so if you have multiple spaces in your selection, it will only take into account the last DOM change you applied.

Can anyone think of any non-document breaking ways to apply this non-continous selections which does not make any permanent changes to the selection and its elements?

The original question

Is it possible to make selections which are non continous in Google Chrome? For example if you have an element with text like this:

<div>this is some random text</div>

Is it possible to make a selection which contains for example this is and text making the text in-between unselected?

This seems to work fine in FF, where you can addRanges which aren't next to each other, and the selection is made accordingly.

For IE, there doesn't seem to be anything that would allow you to have multiple ranges, but IE's selection object has a lot of other methods that compensate for it.

With non-continous selections, you could always append or prepend a selection a certain section from a website for example when performing copy actions, or force the user to unselect certain portions of their selections, which you don't want them to copy.

Example of non-continous selection:

working example (working at least in FF4).

edit To perform the same type of selection manually, you can with firefox hold ctrl down and start dragging text in different positions, but performing it on chrome doesn't work.

edit 2 I guess this and this sum it up quite well. Looks like there isn't anything to be expected as far as webkit browsers are concerned.

Answer 1

No. Firefox is the only mainstream browser to support multiple selected ranges. I think the main use case for it was to allow selection of individual columns within tables, which is not possible otherwise.

WebKit are not planning to support multiple selected ranges any time soon, from what I can gather. IE overhauled its Range and Selection APIs for IE 9 and didn't implement it. No idea about whether Opera has any plans to support it. See this thread from the WHATWG mailing list for some information: