上按键更改内部HTML的JavaScript

我有下面的代码上按键更改内部HTML的JavaScript

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

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

问题是我不想与替换的innerHTML（以取代旧的innerHTML）方法，而不是我想像这样

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

而不是

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

来源

2015-05-13 EMM

您是否必须使用原生JavaScript，因为jQuery有一个.text（）函数，可以完成您所要求的非常简单的操作。 –

可能重复的[javascript替换HTML中的文本]（http://stackoverflow.com/questions/5558613/javascript-replace-text-in-the-html-body） –

@SergeyDenisov我想要实现的原始替换是这样的 'innerHTML.replace（RegularExpression，“ $ 1 ”）;' 其中“RegularExpression”是一个与数字相符的正则表达式，“$ 1”是与正则表达式匹配的子字符串 – EMM

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; 
 
}

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

来源

2015-05-13 20:40:19

不错！你可以使它更清洁，因为this.innerHTML = this.innerHTML.replace（“this”，“that”）;'并且保存你自己的额外DOM抓取。 – Thriggle

好点！只是做了编辑。感谢您的输入！ –

jQuery让这种方式更容易，不幸的是我不知道的方式来替换文本在字符串中，而不必再次设置该字符串。我觉得你可以做的最多的是使你的代码更易读，只有做元素一旦查找：

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

来源

2015-05-13 20:41:30 TomSlick

当使用JavaScript，你必须以改变其分配到的东西的innerHTML平原。

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

您可以缩短一点，但不能避免步骤1）获取元素2）更改其值。

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

来源

2015-05-13 20:46:13

上按键更改内部HTML的JavaScript

回答

相关问题