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

Question

我有一个 div 标签，其中 contenteditable 设置为 true。我正在尝试找出 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);

对于较旧的浏览器， trim 可能需要 shim。( .replace(/\s$/,""))

要像您一样删除标点符号，" Test!!! "还可以进行如下替换：

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

根据您的需要，您可能希望对要省略的字符进行更具体的定义，而不是\W。

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

Answer 2

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

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

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

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

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

这是整个代码

HTML

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

JavaScript（使用 jQuery） ​</p>

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

演示

Answer 3

这是终极方法：

// 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 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/