在跨平台的瀏覽器中獲取所選文本

Question

我想在基於瀏覽器的應用程序中做的事情之一是允許用戶選擇一些文本（不是在<textarea>，只是簡單的文本！），並讓我的應用程序彈出一個小工具欄，然后可以與下一個交互（在我的情況下，添加注釋）。

我在google上發現了很多東西，似乎專注於編寫WYSIWYG編輯器， 但這不是我想要的 ，而且大多數都在IE中工作但在FF2或3中沒有。理想情況下，我想要一些可以在瀏覽器窗口中返回當前所選文本的功能，該瀏覽器窗口在IE7中工作（如果可能，則為6），FireFox 2和3以及Safari 2 。 如果它在Opera中有效，那將是一個獎勵，但這不是必需的。

任何人都有這樣做的功能？ 或者從哪里開始的想法？

Answer 1

這個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

Answer 2

看看jQuery和wrapSelection插件 。 這可能就是你要找的東西。

Answer 3

Range簡介提供了一些有關不同瀏覽器如何讓您訪問文本選擇的詳細信息。

我的經驗是直接使用這些不同的API是非常笨拙的，所以如果wrapSelection適合你，我會去那。

Answer 4

這些天這個方法應該足夠了 ：

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

它會返回''在真的老的瀏覽器極少數情況下，可能是Opera Mini的情況下（進行測試，不過，這可能是過時的）+見注為UC瀏覽器為Android。

Answer 5

此處概述了各個瀏覽器在選擇方面的行為。

Answer 6

此代碼適用於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...