如何将光标移动到textarea中的下一个/上一个单词？

Question

如何将光标移动到使用Javascript的textarea中的下一个或上一个单词？我试图在HTML textarea中复制Emacs命令“前进一个单词”和“后退一个单词”。

我可以使用rangyinputs获得当前光标/光标位置，但我不确定如何有效地移动到下一个单词，而不使用各种分割，这些分割对于很长的文本可能会很慢。

Answer 1

我用setCaretToTextEnd()从here和.selectRange()从here。以下函数使用Emacs风格的插入位置，并且比循环单词更高效。

function nextWord(input) { 
    let currentCaretPosition = input.selectionStart; 

    // -1 Because Emacs goes to end of next word. 
    let nextWordPosition = input.value.indexOf(' ', currentCaretPosition) - 1; 
    if (nextWordPosition < 0) { 
    input.setCaretToTextEnd(); 
    } else { 
    input.selectRange(nextWordPosition); 
    } 
} 

function previousWord(input) { 
    let currentCaretPosition = input.selectionStart; 

    // +1 Because Emacs goes to start of previous word. 
    let previousWordPosition = input.value.lastIndexOf(' ', currentCaretPosition) + 1; 
    if (previousWordPosition < 0) { 
    input.selectRange(0); 
    } else { 
    input.selectRange(previousWordPosition); 
    } 
} 

Answer 2

看到这个fiddle。我使用jQuery Set Cursor Position in Text Area中的函数来改变光标的位置。

function nextWord(input) { 
    var words = input.value.split(" "), 
     index = 0; 
    for (var i in words) { 
     var word = words[i]; 
     if (index+word.length >= input.selectionStart) { 
      setCaretToPos(input, index+word.length+1); 
      break; 
     } 
     index += word.length+1; 
    } 
} 
function previousWord(input) { 
    var words = input.value.split(" ").reverse(), 
     index = input.value.length; 
    for (var i in words) { 
     var word = words[i]; 
     if (index+1 <= input.selectionStart) { 
     setCaretToPos(input, index-word.length); 
      break; 
     } 
     index -= word.length+1; 
    } 
}