Javascript: Select text for copy of all similar elements in HTML document

Question

There are a lot of articles published to stackoverflow and in other websites which are relevant to the way of selecting text of ONE element in order to be available for copy.

But I have not found a function which can SELECT AND HIGHLIGHT the text of ALL similar elements in an HTML document. For example, to select the text from all h2 titles.

I tried to modify the function from this thread which selects one element.

SELECTING ONE ELEMENT FUNCTION

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

Here is the modified version of the above function which performs the selection of all similar elements.

$.fn.selectTextAll = function() {
     var doc = document,
         numElem = this.length,
         elements = this;

     if(doc.body.createTextRange) {
         for(i=0; i<numElem; i++) {
             var range = document.body.createTextRange();
             range.moveToElementText(elements[i]);
            range.select();
        }
     } 
     else if(window.getSelection) {
         var selection = window.getSelection();
         selection.removeAllRanges();
         for(i=0; i<numElem; i++) {
             var range = document.createRange();
             range.selectNodeContents(elements[i]);
             selection.addRange(range);
         }
     }
 };

The problem is that the above function is working properly in Firefox but in no other browser, Chrome, Safari, Opera, IE+9.

In order to confirm this, you can open this fiddle in all browsers. It is working only in Firefox.

Can anyone give a solution to this?

Thank you for your time

can't you just use document.getElementsByTagName? https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName — pherris, Aug 19 '14 at 15:38
Thank you both for your comments. The problem will not be solved by using document.getElementsByTagName. In [this fiddle](http://jsfiddle.net/nda8zLbk/) i have used the code from [this article](https://developer.mozilla.org/en-US/docs/Web/API/Selection.addRange). Again, it is working in Firefox but not in other browsers. — mponiek, Aug 19 '14 at 20:35
@mponiek Tried workaround at post for specific `html` at jsfiddle at OP ? Or, _does requirement include existence of elements in DOM between selected elements_ ? i.e.g., "But I have not found a function which can SELECT AND HIGHLIGHT the text of ALL similar elements in an HTML document. For example, to select the text from all h2 titles." see http://jsfiddle.net/guest271314/g17432hb/8/ . Thanks — guest271314, Aug 19 '14 at 20:47
@guest271314 Yes, between the selected elements there are other elements. Please open this fiddle [http://jsfiddle.net/guest271314/g17432hb/8/](http://jsfiddle.net/guest271314/g17432hb/8/) in chrome. It is not working properly. — mponiek, Aug 19 '14 at 21:06
That specific jsfiddle does _not_ include DOM elements between `h2` elements . You are correct . Initially tried at chromium 33 - all `h2` were highlighted . Just tried at chrome 37 - only first `h2` highlighted. There appear to be a `bindWithEvent` event attached to the `Range` object that may help ? Tried `select selectstart` events , without any notification at console . — guest271314, Aug 19 '14 at 21:25
@mponiek Another approach may include utilizing `innerHTML` and `css` properties for `webkit` ? Or create custom event attached to `this` at piece at OP to adjust display , save text on "select" of elements ? — guest271314, Aug 19 '14 at 22:01

score 1 · Answer 1 · edited May 23 '17 at 12:34

After a lot of research, I have found that whatever I have been trying to do is not possible.

Actually, this is called selection with multiple ranges which is supported ONLY by Firefox.

There are some interesting information about this in the following articles:

1) https://bugzilla.mozilla.org/show_bug.cgi?id=753718#c0

2) https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html Read the Note which starts with Originally, the Selection

You can read there that this feature is not available in other browsers except Firefox and it is unlikely to be added in the near future.

Also, this issue has been covered sometimes in stackoverflow also. Examples:

Is there a way selecting MULTIPLE areas of text with JS in Chrome and/or IE?

Non-continuous selections in chrome?

Sorry about the duplication and thanks to the people who spent time on it.

score 0 · Answer 2 · edited May 23 '17 at 10:33

Note, Workaround

All h2 elements selected without p elements siblings http://jsfiddle.net/guest271314/g17432hb/8/

All h2 elements selected with p element siblings http://jsfiddle.net/guest271314/g17432hb/9/

See console ; range object appear to still collect , store selection , range data

Workaround -- if requirement is for rendering display of specific elements being selected , with text , or other content as "sibling" content between selection range . Not certain about exact requirement; a) visually displayed rendering; b) actual range / selection data; both ?

Try

html

<h2>First Title</h2>
<h2>Second Title</h2>
<h2>Third Title</h2>

css

h2:after {    
  color : #000;
  font-weight : normal;
  position : relative;
  background : #fff;
  font-size : 14px;   
  padding-top : 8px;
  padding-bottom : 8px;
  /* webkit `user agent stylesheet` for `p` element */
  display : block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

h2:nth-of-type(1):after {
  content:"First paragraph First paragraph First paragraph First paragraph";   
}

h2:nth-of-type(2):after {
  content:"Second paragraph Second paragraph Second paragraph Second paragraph";   
}

h2:nth-of-type(3):after {
  content:"Third paragraph Third paragraph Third paragraph Third paragraph";   
}

js

var h2 = document.getElementsByTagName("h2");
var s = window.getSelection();

if(s.rangeCount > 0) s.removeAllRanges();

for(var i = 0; i < h2.length; i++) {
  var range = document.createRange();
  range.selectNode(h2[i]);
  s.addRange(range);
  // console.log(s, range);
};

jsfiddle http://jsfiddle.net/guest271314/g17432hb/

See

Selection.addRange()

Javascript: Select text for copy of all similar elements in HTML document

2 Answers2