热门：华为支持参数分辨率解决方法控制属性启动升级错误平台推荐步骤模式查询运行空间文件夹鼠标图标重启激活联想检查状态应用程序

关于javascript：在浏览器中获取选定的文本，跨平台

2023-04-18 03:31:42

关于javascript：在浏览器中获取选定的文本，跨平台

Getting selected text in a browser, cross-platform

我想在我的基于浏览器的应用程序中做的一件事是允许用户选择一些文本(不是在文本区域中，只是普通的 ol\\' 文本！)，然后让我的应用程序弹出一个然后可以与下一个交互的小工具栏(在我的情况下，添加注释)。

我在 google 上找到了很多似乎专注于编写 WYSIWYG 编辑器的东西，但这不是我想要的，而且大部分都在 IE 中有效，但在 FF2 或 3 中无效。理想情况下，我想要一些功能，可以在 IE7(如果可能的话 6)，FireFox 2 中工作的浏览器窗口中返回当前选定的文本

这个 jQuery 插件很酷，但它完成了一项非常具体的任务：用标签包裹你突出显示的文本。这可能正是您想要的。但是，如果您不想(或无法)向页面添加任何无关的标记，则可以尝试以下解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}

这个函数返回一个代表文本选择的对象。它可以跨浏览器工作(尽管我怀疑它返回的对象会因浏览器而略有不同，并且只对结果的实际文本而不是任何附加属性可靠)。

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

看看 jQuery 和 wrapSelection 插件。这可能是您正在寻找的。

现在这个方法应该够用了：

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

它会在极少数情况下返回 '' 非常旧的浏览器，并且可能是在 Opera Mini 的情况下(但要测试，这可能已经过时)请参阅 Android UC 浏览器的说明。

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

我的经验是，直接使用这些不同的 API 是很笨拙的，所以如果 wrapSelection 对你有用，我会选择它。

此代码适用于 Safari、IE 和 Firefox - 希望对您有所帮助

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

此处概述了各个浏览器在选择方面的行为。
文本浏览跨平台应用程序

推荐阅读