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

One of the things I'd like to do in my browser-based application is allow the user to select some text (not in a <textarea>, just plain ol' text!), and have my application pop up a small toolbar that then can interact with the next (in my case, add annotations).

在基于浏览器的应用程序中，我想做的一件事是允许用户选择一些文本(不是在中，只是纯ol' text!)，并让我的应用程序弹出一个小工具栏，然后可以与下一个工具栏交互(在我的例子中，添加注释)。</p>

I've found a lot of stuff on google that seems to be focused on writing WYSIWYG editors, but that isn't what I want, and most of it worked in IE but not in FF2 or 3. Ideally, I'd like some function that can return the currently selected text in the browser window that works in IE7 (and 6 if possible), FireFox 2 & 3 and Safari 2. If it works in Opera, that'd be a bonus, but it's not a requirement.

我在谷歌上发现了很多内容，它们似乎都专注于编写WYSIWYG编辑器，但这并不是我想要的，大多数都在IE中工作，但在FF2或3中没有。理想情况下，我希望有一个函数可以返回IE7(如果可能的话是6)、FireFox 2 & 3和Safari 2中当前选定的文本。如果它能在歌剧中使用，那将是额外的奖励，但这不是必要条件。

Anyone have a function that does this? Or an idea of where to start?

有人有这样的函数吗?或者从哪里开始?

5 个解决方案

#1

Have a look at jQuery and the wrapSelection plugin. It may be what you are looking for.

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

#2

That jQuery plugin is cool but it accomplishes a very specific task: wrap the text you highlight with a tag. This may be just what you want. But if you don't want to (or are in a situation where you can't) add any extraneous markup to your page, you might try the following solution instead:

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;
}

This function returns an object representing the text selection. It works across browsers (though I suspect the objects it returns will be slightly different depending on the browser and only dependable for the actual text of the result rather than any of the additional properties).

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

Note: I originally discovered that code fragment here: http://www.codetoad.com/javascript_get_selected_text.asp

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

#3

Introduction to Range has some details on how different browsers give you access to the text selection.

Range的介绍有一些关于不同浏览器如何让您访问文本选择的细节。

My experience is that working with these different APIs directly is quite clumsy so if wrapSelection works for you I'd go with that.

我的经验是，直接使用这些不同的api是相当笨拙的，所以如果wrapSelection适合您，我就会使用它。

#4

-1

The behaviour of individual browsers with regard to selection is outlined here.

这里概述了不同浏览器在选择方面的行为。

#5

-3

This code works in Safari, IE and Firefox - hope it's of some help

这段代码适用于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...

#1