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);