Question

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

但是我还没有找到一个能够选择和突出显示 HTML文档中 ALL 类似元素的文本的函数。例如，要从所有 h2 标题中选择文字。

我尝试修改此thread中选择一个元素的函数。

选择一个元素功能

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。

为了确认这一点，您可以在所有浏览器中打开this fiddle。它仅适用于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中有时也涵盖了这个问题。例子：

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

Non-continuous selections in chrome?

左。对于复制感到抱歉，并感谢那些花时间的人。

Answer 2

注意，解决方法

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

使用 h2元素兄弟http://jsfiddle.net/guest271314/g17432hb/9/

选择所有p个元素
见console; range对象似乎仍在收集，存储选择，范围数据

解决方法 - 如果要求用于呈现特定元素的显示，使用文本或其他内容作为＆＃34;兄弟＆＃34;选择范围之间的内容。不确定要求; 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()

另见，

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

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

2 个答案: