獲取所選文字相對於元素的選擇範圍

我從another StackOverflow post找到此功能，該功能根據指定的起始和結束範圍（相對於父元素）突出顯示文字。不幸的是，我不完全確定它是如何工作的。這是方法：獲取所選文字相對於元素的選擇範圍

function setSelectionRange(el, start, end) { 
    if (document.createRange && window.getSelection) { 
     var range = document.createRange(); 
     range.selectNodeContents(el); 
     var textNodes = getTextNodesIn(el); 
     var foundStart = false; 
     var charCount = 0, endCharCount; 

     for (var i = 0, textNode; textNode = textNodes[i++];) { 
      endCharCount = charCount + textNode.length; 
      if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) { 
       range.setStart(textNode, start - charCount); 
       foundStart = true; 
      } 
      if (foundStart && end <= endCharCount) { 
       range.setEnd(textNode, end - charCount); 
       break; 
      } 
      charCount = endCharCount; 
     } 

     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (document.selection && document.body.createTextRange) { 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(el); 
     textRange.collapse(true); 
     textRange.moveEnd("character", end); 
     textRange.moveStart("character", start); 
     textRange.select(); 
    } 
}

現在我想做相反的事情。我想要獲取相對於某個元素的選擇範圍，特別是明確定義的start和end值。

我該如何使用setSelectionRange中使用的類似方法來編寫相對於父元素的「getSelectionRange」方法，以便我可以使用這兩種方法來獲取/設置選擇範圍？

來源

2015-06-23 Charles

的逆過程是簡單的：給定一個範圍和一個父元素，該方法是

創建包圍所述元件
設置該範圍的端部的內容的新範圍到您測量範圍的起始邊界
通過在測量範圍內調用toString()獲取返回的字符串長度。這是你的開始抵消。
通過在原始範圍上調用toString()獲取返回的字符串長度，並將其添加到起始偏移量。這是你的最終抵消。

例如，請參見saveSelection函數here。

來源

2015-06-24 08:23:05

非常感謝Tim。 – Charles

您可以使用window.getSelection()檢索到的Selection對象已有一個getRange方法，該方法將爲您提供當前選定的range對象。這個range對象與您提到的函數中使用的對象相同，並且包含有關當前所選內容的所有信息，即開始節點，結束節點，startOffset，endOffset等等。請參閱

它與您在此處的含義大致相反，即如果您選擇頁面中的內容，則可以執行此操作來獲取和設置所選內容。

var current_range = window.getSelection().getRangeAt(0); 
window.getSelection().removeAllRanges(); 
window.getSelection().addRange(current_range);

來源

2015-06-23 22:55:12

獲取所選文字相對於元素的選擇範圍

回答

相關問題