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函数获取该字符串：

＆＃13;

$("div").on("keyup", function(e){
  if (e.keyCode === 0 || e.keyCode === 32) {
    var selection = getSelection();
    var line = selection.getRangeAt(0).endContainer.nodeValue;
    var cursor = selection.focusOffset;
    var words = line.substring(0, cursor).trim().split(' ');
    var lastWord = words[words.length - 1];
    console.log(lastWord);
  }
});

＆＃13;

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

＆＃13;

Answer 2

在按键事件中将每个单词存储在数组中，以便您可以捕获用户键入的单词的顺序。用空格分割后取出最后一个字。

例如如果用户输入了：

“这是测试信息”然后他在“信息”字之前键入“更新”字，所以语句就像“这是测试更新信息”：

所以在上面的数组中，单词序列将是：

“这是更新的测试信息”，然后我们可以拆分数组，在拆分后，我们将“更新”作为我们想要的最后一个单词。

Answer 3

你需要获得插入位置，并从中返回以恢复整个单词。你可以在这里测试一下：

$("div").on("keyup", function(e){
  if (e.keyCode === 13 || e.keyCode === 32) {
    var text = $(this).text();            
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(e.target);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;

    var word = "";
    var iterator = caretOffset-1;
    var blanks = String.fromCharCode(160) + " \n"; 
    // Skip blanks from right to left
    while (iterator >= 0 && blanks.indexOf(text[iterator]) > -1) {
        iterator--;
    }

    while (iterator >= 0 && blanks.indexOf(text[iterator]) == -1) {
    console.log(text[iterator].charCodeAt(0));
        word = text[iterator] + word;
      iterator -= 1;
    }
    console.log(word.trim());
  }
});

https://jsfiddle.net/7Lgpvgwc/1/

我从here获得了插入位置。

修改：看起来contentEditable换行符使用nbsp（非中断空格）而不是换行符。

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

3 个答案: