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

Ответы можно найти в документации по DOM Range. Есть официальная спецификация или, если хотите, статья MDN .

Проблема в том, что ваш код пытается установить начальную и конечную границы диапазона равными 0-му и 5-му дочерним узлам div соответственно. Если вам нужно работать со смещением символов в тексте, вам нужно работать с текстовыми узлами. Предполагая, что ваш textdiv содержит один текстовый узел , вы можете сделать что-то вроде следующего для браузеров не IE:

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

В более старых версиях IE (<= 8) диапазон DOM отсутствует, и вам придется использовать проприетарную версию IE <a href="http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx" rel="nofollow noreferrer">TextRange. Только для конкретного случая элемента, содержащего один текстовый узел , будет работать следующее:

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

Answer 2

//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 3

Вот выражение для первого значения (только для версии без Империи Зла):

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