Question

我有以下代码

＆＃13;

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

＆＃13;

<div id="editable" contenteditable="true" style="width:100px;height:100px" onkeypress="kpress()"></div>

＆＃13;

问题是我不想用innerHTML替换旧的innerHTML和replace（）方法，而是我想要这样的东西

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

而不是

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

Answer 1

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

以下是使用JavaScript实现所需内容的简洁方法：JSFiddle Example

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="editable" contenteditable="true"></div>

＆＃13;

Answer 2

使用普通javascript时，你必须为innerHTML指定一些东西才能改变它。

native replace方法返回一个字符串但不修改DOM。

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

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

Answer 3

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

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

在按键javascript上更改内部html

3 个答案: