在跨平台的浏览器中获取所选文本

时间:2008-08-13 23:32:09

标签: javascript browser

我想在基于浏览器的应用程序中执行的操作之一是允许用户选择一些文本(不在< textarea>中,只是简单的文本!),并让我的应用程序弹出一个小工具栏,然后可以与下一个工具栏交互(在我的情况下,添加注释)。

我在谷歌上发现很多东西,似乎专注于编写WYSIWYG编辑器,但这不是我想要的,并且大多数都在IE中工作但在FF2中没有或者3.理想情况下,我想要一些能够在浏览器窗口中返回当前所选文本的功能,该浏览器窗口在 IE7(如果可能的话还有6个)中运行,FireFox 2& 3和Safari 2 。如果它在Opera中有效,那将是一个奖励,但这不是一个要求。

任何人都有这样做的功能吗?或者想知道从哪里开始?

6 个答案:

答案 0 :(得分:16)

这个jQuery插件很酷但它完成了一项非常具体的任务:用标签包装你突出显示的文本。这可能就是你想要的。但是,如果您不想(或者您处于不可能的情况)向页面添加任何无关的标记,您可以尝试使用以下解决方案:

function getSelectedText() {
  var txt = '';

  if (window.getSelection) {
    txt = window.getSelection();
  }
  else if (document.getSelection) {
    txt = document.getSelection();
  }
  else if (document.selection) {
    txt = document.selection.createRange().text;
  }
  else return; 

  return txt;
}

此函数返回表示文本选择的对象。它适用于各种浏览器(虽然我怀疑它返回的对象会因浏览器而略有不同,只能依赖于结果的实际文本而不是任何其他属性。)

注意:我最初在这里发现了代码片段:http://www.codetoad.com/javascript_get_selected_text.asp

答案 1 :(得分:8)

查看jQuerywrapSelection plugin。这可能就是你要找的东西。

答案 2 :(得分:1)

Introduction to Range详细介绍了不同的浏览器如何让您访问文本选择。

我的经验是,直接使用这些不同的API非常笨拙,所以如果wrapSelection适合你,我会选择它。

答案 3 :(得分:0)

如今,这种方法should be enough

function getSelectedText() {
    return window.getSelection ? window.getSelection().toString() : '';
}

在非常老旧的浏览器中,它会返回'',对于Opera Mini(可能会过时,但可能会过时)可能会返回id +请参阅Android版UC浏览器的注释。

答案 4 :(得分:-1)

各个浏览器在选择方面的行为是outlined here

答案 5 :(得分:-3)

此代码适用于Safari,IE和Firefox - 希望它有所帮助

var str = (window.getSelection) ? window.getSelection() : document.selection.createRange();
str = str.text || str;
str = str + ''; // the best way to make object a string...