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

时间:2020-03-05 18:39:30  来源:igfitidea点击:

我想在基于浏览器的应用程序中做的一件事是允许用户选择一些文本(不在<textarea>中,只是纯文本!),然后让我的应用程序弹出一个小的工具栏,然后可以与下一个互动(在我的情况下,添加注释)。

我在Google上发现了很多东西,似乎专注于编写所见即所得的编辑器,但这不是我想要的,大部分都可以在IE中使用,但不能在FF2或者3中使用。理想情况下,我想要一些该功能可以在IE7(如果可能,还可以在6),FireFox 2和3和Safari 2中运行的浏览器窗口中返回当前选定的文本。

任何人都具有执行此功能的功能吗?还是从哪里开始的想法?

解决方案

回答

看看jQuery和wrapSelection插件。这可能是我们要寻找的。

回答

Range简介详细介绍了不同的浏览器如何使我们可以访问文本选择。

我的经验是,直接使用这些不同的API非常笨拙,因此,如果wrapSelection可以为我们工作,那么我会这样做。

回答

此处概述了各个浏览器在选择方面的行为。

回答

该代码可在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...

回答

那个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