文本選擇及操做

應用場景

選取一段文本，對該段文本進行操做

兼容性

1. window.getSelection() 或 document.getSelection()
   • FF、Chrome、IE9（含）+、Opera、Safari
2. document.selection
   • IE8

經常使用屬性及方法

var selectionObj = window.getSelection();

1. 獲取選取文本的內容

   var selectedText = selectionObj.toString();

   該方法能夠獲取到選擇的文本內容，不受節點限制
   html <p>本書原做者 Zakas 長期<span class="selected">供職於雅虎</span>，是著名的 JS 庫 YUI 的主要做者，有着非<span class="selected">常豐富的一線</span>工做經驗。他同時也是一個成功的做者，其最重要的著做《 JavaScript 高級編程》基本上是 JS 領域的必讀之做，而他還出版了另外一些質量很高的著做。《高級編程》一書實際上並非徹底高深的內容，而是從基本的層次開始講述，逐步提升，全書結構比較良好，對初學者或有必定經驗的開發者來講都是頗有用的。</p>
   
   此時selectedText爲著名的 JS 庫

   
   此時selectedText爲於雅虎，是著名，因此toString方法不受標籤限制，返回選取的文本內容

2. 獲取選取文本起止點所在節點
   js var anchorNode = selectionObj.anchorNode; var baseNode = selectionObj.baseNode; var extentNode = selectionObj.extentNode; var focusNode = selectionObj.focusNode;
anchorNode和baseNode爲選取文本起始點所在節點，extentNode和focusNode爲選取文本結束點所在節點

   
   此時，無論是從前向後選取仍是從後向前選取，選取的文本都在，是著名的 JS 庫 YUI 的主要做者，有着非範圍內，因此anchorNode、baseNode、extentNode和focusNode是相同的

   
   此時，若是是從前向後選取，anchorNode和baseNode應該是<span class="selected">供職於雅虎</span>，extentNode和focusNode爲，是著名的 JS 庫 YUI 的主要做者，有着非；若是是從後向前選取，則相反

3. 獲取選取文本在其所在節點中的起止位置
   javascript var anchorOffset = selectionObj.anchorOffset; var baseOffset = selectionObj.baseOffset; var extentOffset = selectionObj.extentOffset; var focusOffset = selectionObj.focusOffset;
anchorOffset和baseOffset爲選取文本起點所在節點的位置（從0開始，從左向右數），extentOffset和focusOffset爲選取文本結束點所在節點的位置（從0開始，從左向右數）

   
   此時，選取的文本在同一節點內，若是是從前向後選取，則anchorOffset和baseOffset爲2，extentOffset和focusOffset爲10，由於從，前開始數0，到著字前，爲2，到庫字後，爲10（JS先後有空格）；相反的，若是從後向前選取，則賦值交換

   
   此時，選取的文本不在同一節點內，若是是從前向後選取，則anchorOffset和baseOffset爲起點雅字在節點<span class="selected">供職於雅虎</span>中的起始位置3（字以前的位置），extentOffset和focusOffset爲結束點名字在節點，是著名的 JS 庫 YUI 的主要做者，有着非中的結束位置4（字以後的位置）;若是是從後向前選取，則賦值交換
4. 判斷是否有選取內容
   有多種方法能夠判斷當前是否有選取的內容
   • anchorNode爲null
   • toString返回爲空
   • anchorOffset和focusOffset相等
   • isCollapsed爲true
   • type等於Caret或None（當有選取內容時，type爲Range）
   • rangeCount爲0

IE8下的使用

var selectionObj = document.selection;
var rangeObj = selectionObj.createRange();

IE8經過createRange方法將選取的文本做爲塊處理，位置標記沒有起止點之分

{
    boundingHeight: 19,
    boundingLeft: 213,
    boundingTop: 16,
    boundingWidth: 96,
    htmlText: '<SPAN class="selected">雅虎</SPAN>，是著名',
    offsetLeft: 211,
    offsetTop: 14,
    text: '雅虎，是著名'
}

在IE8下還能夠經過命令execCommand對選取的文本進行操做