如何在 javascript 中向后扩展选择？

Question

我正在使用一个用户界面，该界面为 select 文本提供按钮，而不是鼠标单击和拖动。用户得到一个文本框 selection 来输入要 selected 的文本，以及一组按钮：

制造select离子
扩展 selection 到下一个词
扩展 selection 到前一个词

该代码非常适合上面的前两个任务。向后扩展 selection 有效，但不是我想要的方式。

所需功能：
段落：这是一个例子。在下面的输入框中输入这段文字中的一些文本，然后按 select 按钮以 select 它。
选择：来自这个
向后扩展选择：（目前）从
向后扩展选择：（应该select）文本来自此
即我想将 anchor 向后移动一个词。我怎样才能实现。

getSelectionText = function() {
  sentence = document.getElementById("sentence");
  target = document.getElementById("target");
  selection = window.getSelection();
  range = document.createRange();
  index = sentence.innerHTML.indexOf(target.value);
  range.setStart(sentence.firstChild, index);
  range.setEnd(sentence.firstChild, (index + target.value.length));
  selection.removeAllRanges();
  selection.addRange(range);
}

removeSelection = function() {
  selection = window.getSelection();
  selection.removeAllRanges();
}

extendSelection = function(buttonId) {
  var element = document.getElementById(buttonId);
  if (element.id == "Previous") {
    var selection = window.getSelection();
    selection.modify("extend", "left", "word");
  } else if (element.id == "Next") {
    var selection = window.getSelection();
    selection.modify("extend", "right", "word");
  }
}

<body>
  <div id="sentence">This is an example. Enter some text from this passage to the input box below and then press the select button to select it.
  </div>
  </br>
  <b> Selection: </b>
  <input type="text" id="target" value="an example" />
  <br>
  <br>
  <input type="button" value="Select" onclick="getSelectionText()">
  <button type="button" value="Remove Selection" onclick="removeSelection()"> Remove Selection</button>
  <button type="button" id="Previous" onclick="extendSelection('Previous')">Extend Selection
    < Previous</button>
  <button type="button" id="Next" onclick="extendSelection('Next')">Extend Selection > Next</button>

Answer 1

不是很漂亮，但以下解决方案对我有用。下面的代码片段包含一个额外的方法 previousWord，它将 sentence 转换为数组，returns 紧接在选择之前的单词。按 Move Selection 会将 selection 的开头重置为包括前一个单词，重复按它也可以正常工作。

getSelectionText = function() {
  sentence = document.getElementById("sentence");
  target = document.getElementById("target");
  selection = window.getSelection();
  range = document.createRange();
  index = sentence.innerHTML.indexOf(target.value);
  range.setStart(sentence.firstChild, index);
  range.setEnd(sentence.firstChild, (index + target.value.length));
  selection.removeAllRanges();
  selection.addRange(range);
}

removeSelection = function() {
  selection = window.getSelection();
  selection.removeAllRanges();
}

extendSelection = function(buttonId) {
  var element = document.getElementById(buttonId);
  if (element.id == "Previous") {
    var selection = window.getSelection();
    selection.modify("extend", "left", "word");
  } else if (element.id == "Next") {
    var selection = window.getSelection();
    selection.modify("extend", "right", "word");

  } else if (element.id == "Move") {
    var selection = window.getSelection();
    range = document.createRange();
    target = " " + previousWord() + " ";
    indexPW = sentence.innerHTML.indexOf(target);
    range.setStart(sentence.firstChild, indexPW + 1);
    range.setEnd(sentence.firstChild, (index + selection.toString().length));
    selection.removeAllRanges();
    selection.addRange(range);
  }
}


previousWord = function() {
  var pw = "";
  var sentence = document.getElementById("sentence").innerHTML;
  var selection = window.getSelection();

  index = sentence.indexOf(selection);

  var sentArray = sentence.split(" ");

  var firstWord = selection.toString().split(" ")[0];

  var firstWordIndex = sentArray.indexOf(firstWord);
  if (firstWordIndex >= 1) {
    pw = sentArray[firstWordIndex - 1];
  } else {
    pw = sentArray[0];
  }
  return pw;
}

<div id="sentence">This is an example. Select text chunk of any length and then press the button below.</div>
</br>
<b> Selection: </b> <input type="text" id="target" value="an example" />
<br> <br>
<input type="button" value="Select" onclick="getSelectionText()">
<button type="button" value="Remove Selection" onclick="removeSelection()"> Remove Selection</button>
<button type="button" id="Previous" onclick="extendSelection('Previous')">Undo Extend</button>
<button type="button" id="Next" onclick="extendSelection('Next')">Extend Selection > Next</button>
<button type="button" id="Move" onclick="extendSelection('Move')">Move Selection</button>

如何在 javascript 中向后扩展选择？

How to extend selection backward in javascript?

javascript

range

selection