Javascript 动态替换内容可编辑文本

我想在用户在contenteditable中键入内容时添加一些HTML。比如说,

$('body')
  .delegate('div[contenteditable=true]', 'blur keyup paste',
    function(){
      var html = this.innerHTML;
      html.replace( "a", "b" );
      this.innerHTML = html;
    });

---

首先，这似乎并不能取代任何东西。第二，我遇到了一个奇怪的问题，我无法再在contenteditable div中键入。我检查了在该div上触发的事件，没有发生“模糊”事件。我似乎突出显示了该div，但我必须再次单击该div以键入任何内容。这里我遗漏了什么？

对于第一部分，问题是JavaScript中字符串的

replace（）

方法返回一个新字符串，并且不影响原始字符串。您需要的是：

html = html.replace("a", "b");

---

对于第二个问题，问题可能是设置元素的

innerHTML

属性会破坏并重新创建元素中的整个DOM树，并且由于选择或插入符号包含在不再存在的DOM树中，因此浏览器必须进行恢复。我的猜测是，您正在测试的浏览器只是清除选择。

如果您希望允许用户选择内容并将其设置为粗体/斜体（或在用户插入点标记所在的位置插入一块HTML），您需要使用

document.execCommand

。Mozilla网站也遇到了类似的问题：我需要突出显示contenteditable中的一些特殊字符。例如，突出显示；红色背景。所以我在做类似的事情

elem.innerHTML = elem.innerHTML.replace('&nbsp;', '<span class="highlight">&nbsp;</span>');

elem.innerHTML=elem.innerHTML.replace（“”，”）；

当然，浏览器将重新创建elem（重新绘制），elem将失去焦点和插入符号位置。如果您在FireFox中的keyup/input事件上打印elem.innerHTML，您会看到它将特殊粘贴
作为标记。我尝试使用相同的技术：我使用范围对象在插入符号位置粘贴标记，然后替换；（此时我失去了焦点）然后我让marker选择并删除它

---

请参阅范围API文档

是的，我已经认为替换是以这种方式使用的，感谢您指出这一点。当调用innerHTML时，DOM树确实发生了一些事情，不知道调用了什么，但很明显，他们不希望您以我的方式使用它。