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 element in order to be available for copy. 元素的文本的方式有关，以便可以复制。

But I have not found a function which can SELECT AND HIGHLIGHT the text of 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

Answer 1

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.

Answer 2

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()

see also ,

Selecting text in an element (akin to highlighting with your mouse)