2013-04-13 173 views
2

我正在製作一個Web應用程序,該應用程序將屏幕分爲兩個窗口,一面是基於Web的文本編輯器,另一面是普通窗口。 我想找到一種方法,可以讓用戶在瀏覽器端突出顯示一些文本,然後將突出顯示的文本自動保存到字符串中,然後我就可以操縱字符串。將突出顯示的文本保存爲字符串

有沒有人有任何想法?任何幫助將不勝感激。

+0

您爲此項目定位了哪些瀏覽器? – mcanfield

回答

3

 function getSelectionText() { 
 
      var text = ""; 
 
      if (window.getSelection) { 
 
       text = window.getSelection().toString(); 
 
      } else if (document.selection && document.selection.type != "Control") { 
 
       text = document.selection.createRange().text; 
 
      } 
 
      return text; 
 
     } 
 
     $(document).ready(function(){ 
 
      $('div').mouseup(function (e){ 
 
       alert(getSelectionText()) 
 
      }) 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
     Hello, this is a highlight text test 
 
    </div>

+0

這很酷!謝謝! – irva91

2

所以你必須在這裏兩個步驟。

  1. 捕獲mouseup事件。
  2. 返回選定的文本。無論文本在文檔中選擇

可以通過JS調用訪問:

window.getSelection() 

但這是針對特定瀏覽器。所以你可以使用這段代碼來覆蓋所有瀏覽器中的選定文本。

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

我假設你使用的是類似jQuery的庫。所以這可以幫助mouseup事件。您可能不希望捕獲整個文檔中的選擇。所以你可以綁定到你需要的任何元素。像這樣的我的jsfiddle:http://jsfiddle.net/xh799/