Javascript：我可以獲取選擇的文本，現在如何獲取選擇之外的文本？

Question

我有一些代碼可以返回選擇的文本，我可以將該字符串分配給一個變量，但現在我只需要兩個變量，一個用於選擇之前的文本，另一個用於選擇之后的文本。 這是獲取選擇的代碼：

function findSelection(){ //returns the selection object.
    var userSelection;
    if (window.getSelection) {userSelection = window.getSelection();} // Mozilla Selection object.
        else if (document.selection){userSelection = document.selection.createRange();} //gets Microsoft Text Range, should be second b/c Opera has poor support for it.
    if (userSelection.text){return userSelection.text} //for Microsoft Objects.
        else {return userSelection} //For Mozilla Objects.
    }

然后我找到 anchorOffset 和 focusOffset 來找到插入符號的位置。 我嘗試使用這些來修改范圍對象，如下所示：

var range = document.createRange();
range.setStart(textdiv,0);
range.setEnd(textdiv,5);

其中textdiv是保存用戶單擊的最后一個 div 的變量。 問題是 firefox 只是給了我一個"Security error" code: "1000"行range.setStart(textdiv,0); .

有沒有更簡單的方法來做到這一點？ 我真的只需要文字，僅此而已。

Answer 1

//returns the selection object.
function findSelection(){ 
  var userSelection;
  if (window.getSelection) {
    userSelection = window.getSelection();
  } // Mozilla Selection object.
  else if (document.selection){
    userSelection = document.selection.createRange();
  } //gets Microsoft Text Range, should be second b/c Opera has poor support for it.
  if (userSelection.text){
    return userSelection.text
  } //for Microsoft Objects.
  else {
    return userSelection
  } //For Mozilla Objects.
}

//get strings before and after selection
function getOuterRange(selection) {
  var rangeBefore = document.createRange();
  var rangeAfter = document.createRange();
  var r = selection.getRangeAt(0);

  rangeBefore.setStart(r.startContainer,0);
  rangeBefore.setEnd(r.startContainer,r.startOffset);

  rangeAfter.setStart(r.endContainer,r.endOffset);
  rangeAfter.setEnd(r.endContainer,r.endContainer.length);

  return {
    before: rangeBefore.toString(),
    after: rangeAfter.toString()
  }
}

console.log(getOuterRange(findSelection()));

Answer 2

這是第一個值的表達式（僅限非邪惡帝國版本）：

window.getSelection().anchorNode.textContent.substring(0,
                window.getSelection().anchorOffset)

Answer 3

答案可以在 DOM Range的文檔中找到。 有官方規范，或者如果您願意，也有MDN 文章。

問題是您的代碼嘗試將范圍的開始和結束邊界分別設置為 div 的第 0 個和第 5 個子節點。 如果您需要處理文本中的字符偏移，則需要使用文本節點。 假設您的textdiv包含單個文本節點，您可以對非 IE 瀏覽器執行以下操作：

var textNode = textdiv.firstChild;
range.setStart(textNode, 0);
range.setEnd(textNode, 0);

在舊版本的 IE (<= 8) 中，沒有 DOM Range，您必須改用 IE 的專有TextRange 。 僅對於包含單個文本節點的元素的特定情況，以下內容將起作用：

var range = document.body.createTextRange();
range.moveToElementText(textdiv);
range.collapse();
range.moveStart("character", 0);
range.moveEnd("character", 5);