从contentEditable div获取最后输入的单词

Question

我有一个contenteditable设置为true的div标签。 我正在尝试找出div中最后输入的单词。

例如，如果我输入“ This is a test并且打了空格，我希望能够得到单词test

我希望能够使用此逻辑，以便我可以测试所键入的每个单词（在按下空格之后）。

如果有人可以帮助我，那就太好了。

Answer 1

一个简单的解决方案如下

var str = "This is a test "; // Content of the div
var lastWord = str.substr(str.trim().lastIndexOf(" ")+1);

修剪可能需要针对旧版浏览器的填充程序。 （ .replace(/\\s$/,"") ）

要去除标点符号，例如" Test!!! "您还可以执行以下替换操作：

lastWord.replace(/[\W]/g,"");

您可能需要根据需要对字符进行更具体的定义而不是\\W

如果您还想在标点符号上而不是在空格上触发事件处理程序，则不需要最后一次替换。

Answer 2

这是最终的方法：

// listen to changes (do it any way you want...)
document.querySelectorAll('div')[0].addEventListener('input', function(e) {
    console.log( getLastWord(this.textContent) );
}, false);


function getLastWord(str){
   // strip punctuations
   str = str.replace(/[\.,-\/#!$%\^&\*;:{}=\_`~()]/g,' ');
   // get the last word
   return str.trim().split(' ').reverse()[0];
}

演示页

Answer 3

您首先必须知道何时编辑内容。 使用jQuery可以做到

​$("div").on("keyup", function(){ /* code */ });

然后，您必须获取整个文本并将其拆分为单词

var words = $(this).text().trim().split(' ');

获取最后一个单词与获取words数组的最后一个元素一样复杂。

这是整个代码

HTML

​<div contenteditable="true">Add text here</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JavaScript（使用jQuery）

$("div").on("keyup", function(){
    var words = $(this).text().trim().split(' '),
        lastWord = words[words.length - 1];
    console.log(lastWord);
});​​​​​​​

演示

Answer 4

您可以尝试通过此操作从可编辑的div中获取字词。

HTML

<div id='edit' contenteditable='true' onkeypress="getLastWord(event,this)">
  </div>    

JS

 function getLastWord(event,element){
             var keyPressed = event.which;
             if(keyPressed == 32){ //Hits Space
                 var val = element.innerText.trim();
                 val = val.replace(/(\r\n|\n|\r)/gm," ");
                 var idx = val.lastIndexOf(' ');
                 var lastWord = val.substring(idx+1);
                 console.log("Last Word " + lastWord);
             }
        }

试试这个链接http://jsfiddle.net/vV2mN/18/