在按键javascript上更改内部html答案

【问题标题】：Change inner html on key press javascript在按键javascript上更改内部html
【发布时间】：2015-07-25 07:01:25
【问题描述】：

我有以下代码

function kpress(){
  document.getElementById("editable").innerHTML = document.getElementById("editable").innerHTML.replace("this","that");
}

&lt;div id="editable" contenteditable="true" style="width:100px;height:100px" onkeypress="kpress()"&gt;&lt;/div&gt;

问题是我不想用带有 replace() 方法的 innerHTML 替换旧的 innerHTML，而是我想要这样的东西

document.getElementById("editable").innerHTML.replace("this", "that");

代替

document.getElementById("editable").innerHTML = document.getElementById("editable").innerHTML.replace("this", "that");

【问题讨论】：

你必须使用原生 JavaScript，因为 jQuery 有一个 .text() 函数，可以很容易地完成你的要求。
javascript replace text in the html body 的可能重复项
@SergeyDenisov 我想要实现的原始替换是这样的 'innerHTML.replace(RegularExpression,"$1");'其中“RegularExpression”是一个用数字计算的正则表达式，“$1”是与正则表达式匹配的子字符串
嘿EMM，当你的问题解决后，别忘了选择一个答案！如果还没有解决，请更新您的问题！

标签： javascript replace contenteditable innerhtml onkeypress

【解决方案1】：

使用纯 javascript 时，您必须为 innerHTML 分配一些内容才能更改它。

本机替换方法返回一个字符串，但不会修改 DOM。

你可以让它更短一点，但不能避免步骤 1) 获取元素 2) 改变它的值。

var ed = document.getElementByID("editable");
ed.innerHTML = ed.innerHTML.replace("this","that");

【讨论】：

【解决方案2】：

innerHTML 获取或设置元素的 HTML。当像这样使用innerHTML 时：innerHTML.replace("this","test") 您实际上是以字符串的形式获取 HTML 并将替换方法应用于字符串。在Element.innerHTML = 的上下文中使用innerHTML 时，您正在设置HTML 的值。 See here for reference.

这是使用 JavaScript 实现所需功能的一种简洁方法：JSFiddle Example

document.getElementById("editable").onkeypress = function (){
    this.innerHTML = this.innerHTML.replace("this","that");
}

#editable {
    width:100px;
    height:100px;
    border:1px #ccc solid;
}

&lt;div id="editable" contenteditable="true"&gt;&lt;/div&gt;

【讨论】：

不错！你可以让它像this.innerHTML = this.innerHTML.replace("this","that"); 一样更干净，并为自己节省额外的 DOM 爬网。

【解决方案3】：

jQuery 使这种方式更容易，但不幸的是，我不知道无需再次设置该字符串即可替换字符串中的文本的方法。我认为你能做的最多就是让你的代码更具可读性，并且只进行一次元素查找：

var editableElement = document.getElementById("editable");
editableElement.innerHTML = editableElement.innerHTML.replace("this", "that");

【讨论】：