javascript - 修改更改击键文字的代码以在 contenteditable 而不是 textarea 中工作

Question

如果这里有这个代码:

$(function() {
   $("#a").keyup(function(e) {
      var updatedText = this.value.replace(
      /(^|[^>])(hello)($|[^<])/gi, "$1<b>$2</b>$3");
      if (updatedText != this.value)
         this.value = updatedText;
   });
});

它的功能是获取与正则表达式匹配的最后一个键入的单词(在本例中为单词 hello)并添加 <b>周围有标签。这在文本区域中效果很好(此处演示:http://jsbin.com/ibecel/2/edit但我似乎无法修改它以在 contenteditable div 中工作。我需要如何修改它才能在 contenteditable div 中工作？我尝试更改 value反对innerHTML和innerText但无济于事。输入单词后它总是会失去焦点，或者不会退出新创建的内容。请帮忙

Answer 1

我做了这个修改版本:http://jsbin.com/amazaq/2/edit -innerHTML 就是您所需要的。

但是您在光标位置方面遇到了麻烦。这是一个更难的问题 - 看看 Set cursor position on contentEditable <div>