Question

我正在使用一个用户界面，提供按钮来选择文本而不是鼠标点击和拖动。用户获取文本框selection以输入要选择的文本和一组按钮：

进行选择
将选择范围扩展到下一个单词
将选择范围扩展到上一个单词

该代码适用于上面的前两个任务。向后扩展选择是有效的，但不是我想要的方式。

所需功能
段落：这是一个例子。在此段落中输入一些文本到下面的输入框，然后按选择按钮将其选中 选择：来自此 向后延伸选择（目前）来自 向后扩展选择：（应选择）此文本中的文字即我想向后移动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转换为数组并返回选择之前的单词。按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中向后扩展选择？

1 个答案: