Javascript:选择文本以复制HTML文档中所有类似元素 [英] Javascript: Select text for copy of all similar elements in HTML document

问题描述

有很多文章发布到stackoverflow和其他网站上，这些文章与选择 ONE 元素的文本的方式有关，以便于复制.

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.

但是我还没有找到可以选择并突出显示 HTML文档中 ALL 类似元素的文本的功能.例如，要从所有 h2 标题中选择文本.

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.

选择一个元素功能

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);
         }
     }
 };

问题是上述功能在Firefox中正常运行，但在其他浏览器，Chrome，Safari，Opera，IE + 9中均无法正常工作.

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

为了确认这一点，您可以在所有浏览器中打开此小提琴.它仅在Firefox中有效.

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?

谢谢您的时间

推荐答案

经过大量研究，我发现我一直想做的事情都是不可能的.

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

实际上，这称为具有多个范围的选择，只有 Firefox会支持.

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) 2) 您可以在此处了解到，此功能在除Firefox之外的其他浏览器中均不可用，并且不太可能在不久的将来添加.

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.

此外，有时在stackoverflow中也解决了此问题.例子:

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

是否可以通过Chrome和/或IE在JS中选择多个文本区域?

很抱歉重复，并感谢那些花时间在上面的人.

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

这篇关于Javascript:选择文本以复制HTML文档中所有类似元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！