javascript - 从文本中间捕获最后输入的单词

Question

我需要捕获用户在 div/textarea 中输入的最后一个词。 当这个词是最后一个词时，这不是问题。但是，如果用户在段落内部(中间)输入单词会怎样？

现在我有这段代码:

<div contenteditable="true">Add text here</div>
<script>
    $("div").on("keyup", function(e){
      if (e.keyCode === 0 || e.keyCode === 32) {
        var words = $(this).text().trim().split(' '),
            lastWord = words[words.length - 1];
        console.log(lastWord);
        }
    });
</script>

它在用户点击空格后获取文本的最后一个词。

Answer 1

使用文本的子字符串直到光标位置，您可以使用 window.getSelection 函数获取:

$('div').on('keyup', function (ev) {
  if (ev.keyCode <= 32) { // Can be extended to all non-alphanumeric.
    var el = ev.target;
    var selection = getSelection();
    var range = selection.getRangeAt(0);
    var line = range.endContainer.nodeValue || '';
    var cursor = selection.focusOffset;
    if (!line) {
      var childNodes = selection.anchorNode.parentNode.childNodes;
      for (var i = 0; i < childNodes.length; i++) {
        if (childNodes[i] == selection.anchorNode) {break;}
        if (childNodes[i].outerHTML) {
          if (childNodes[i].innerText) {line += ' ' + childNodes[i].innerText.trim();}
        } else if (childNodes[i].nodeType == 3) {
          if (childNodes[i].textContent) {line += ' ' + childNodes[i].textContent.trim();}
        }
      }
      line = line.trim();
      cursor = line.length;
    }
    var words = line.replace(/\W+/gm, ' ').substring(0, cursor).trim().split(' ');
    var lastWord = words[words.length - 1];
    console.log(lastWord);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" style="min-height: 80px;">
  Add text here<br/>
  Or do it in this line<br/>
  newline
</div>