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);

修剪可能需要旧版浏览器的垫片。（.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];
}

DEMO PAGE

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);
});

<强> Demo

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/

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

4 个答案:

这是最终的方式：

DEMO PAGE

这是整个代码