Javascript:为HTML文档中所有相似元素的副本选择文本

Question

有很多文章发表在stackoverflow和其他网站上，这些文章都是关于选择一个元素的文本以便可供复制的方法。

但是我没有找到一个函数可以SELECT AND HIGHLIGHT所有类似元素在HTML文档中的文本。例如，要从所有h2标题中选择文本。

我试图修改这个线程中选择一个元素的函数。

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

下面是上述函数的修改版本，它执行所有相似元素的选择。

$.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中没有。

为了确认这一点，你可以在所有浏览器中打开这个提琴。它只在Firefox中工作。

有谁能给出一个解决方案吗?

感谢您的宝贵时间

Answer 1

经过一番研究，我发现无论我一直想做什么都是不可能的。

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

下面的文章中有一些有趣的信息:

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

2) https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html阅读注释以开头最初，选择

你可以在那里读到这个功能在除Firefox之外的其他浏览器中是不可用的，而且在不久的将来也不太可能添加。

同样，这个问题有时也在stackoverflow中被讨论过。例子:

是否有一种方法选择文本的多个区域与JS在Chrome和/或IE?

chrome中的非连续选择?

很抱歉重复，感谢花时间在这上面的人。

Answer 2

注意，变通方法

所有h2元素被选中没有 p元素的兄弟元素http://jsfiddle.net/guest271314/g17432hb/8/

所有h2元素被与 p元素的兄弟元素选中http://jsfiddle.net/guest271314/g17432hb/9/

见console;range对象出现仍在收集，存储选择，范围数据

变通方法——如果需要呈现被选中的特定元素的显示，带有文本或其他内容作为选择范围之间的"兄弟"内容。不确定确切的要求;A)视觉显示渲染;B)实际范围/选择数据;两个?

试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/

看

Selection.addRange ()

参见，

在元素中选择文本(类似于用鼠标突出显示)