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 只是在range.setStart(textdiv,0); 行给了我一个"Security error" code: "1000"。

有没有更简单的方法来做这件事？我真的只需要文字而已。

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

可以在 DOM Range 的文档中找到答案。有官方的spec，或者如果你愿意，有一个MDN article。

问题在于您的代码尝试将范围的开始和结束边界分别设置为 div 的第 0 个和第 5 个子节点。如果您需要处理文本中的字符偏移，则需要使用文本节点。 假设您的 textdiv 包含单个文本节点，您可以对非 IE 浏览器执行以下操作：

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

在旧版本的 IE (TextRange。 仅针对包含单个文本节点的元素的特定情况，以下将起作用：

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

Answer 3

这是第一个值的表达式（仅限非 Evil-Empire 版本）：

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