Javascript：选择文本以复制HTML文档中的所有类似元素

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

但我还没有找到一个可以选择和突出显示HTML文档中所有相似元素的文本的函数。 例如，从所有h2标题中选择文本。

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

选择一个元素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); } } }; 

问题是上述function在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之外的其他浏览器中没有此function，并且不太可能在不久的将来添加。

此外，stackoverflow中有时也会涉及此问题。 例子：

有没有办法在Chrome和/或IE中用JS选择多个文本区域？

铬的非连续选择？

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

Answer 2

注意，解决方法

所有h2元素都选择没有 p元素兄弟姐妹http://jsfiddle.net/guest271314/g17432hb/8/

用 p元素兄弟姐妹选择的所有h2元素http://jsfiddle.net/guest271314/g17432hb/9/

见console ; range对象似乎仍然收集，存储选择，范围数据

解决方法 – 如果要求将选定的特定元素的显示，文本或其他内容作为选择范围之间的“兄弟”内容。 不确定确切的要求; a）视觉显示渲染; b）实际范围/选择数据; 两个？

尝试

HTML

 
First Title
 
Second Title
 
Third Title 

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（）

也可以看看 ，

选择元素中的文本（类似于用鼠标突出显示）