我有一个 div 标签,其中 contenteditable 设置为 true。我正在尝试找出 div 中最后输入的单词。
例如,如果我输入This is a test
并点击一个空格,我希望能够得到这个词test
我希望能够使用这个逻辑,以便我可以测试输入的每个单词(按下空格后)。
如果有人可以帮助我,那就太好了。
我有一个 div 标签,其中 contenteditable 设置为 true。我正在尝试找出 div 中最后输入的单词。
例如,如果我输入This is a test
并点击一个空格,我希望能够得到这个词test
我希望能够使用这个逻辑,以便我可以测试输入的每个单词(按下空格后)。
如果有人可以帮助我,那就太好了。
一个简单的解决方案如下
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
。
如果您还想在标点字符上触发事件处理程序,而不仅仅是在空格上,则不需要最后一个替换。
您首先必须知道内容何时被编辑。使用jQuery,可以做到
$("div").on("keyup", function(){ /* code */ });
然后,您必须获取整个文本并将其拆分为单词
var words = $(this).text().trim().split(' ');
获取最后一个单词就像获取words
数组的最后一个元素一样复杂。
HTML
<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);
});
// 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];
}
您可以尝试从可编辑的 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);
}
}