Изменение внутренней HTML при нажатии клавиши Javascript

Question

Я следующий код

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"); 

Answer 1

внутреннийHTML либо получает, либо устанавливает HTML для элемента. При использовании innerHTML вот так: innerHTML.replace("this","test") вы фактически получаете HTML в виде строки и применяете метод replace к строке. При использовании innerHTML в контексте Element.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>

Answer 2

JQuery делает этот путь проще, и к сожалению, я не знаю способ заменить текст в строке без необходимости повторять эту строку. Я думаю, что самое вы можете сделать, это сделать код более удобным для чтения и только сделать поиск элемента один раз:

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

Answer 3

При использовании равнины Javascript вы должны назначить что-то к innerHTML для того, чтобы изменить его.

Собственный метод замещения возвращает строку , но не модифицирует DOM.

Вы можете сделать это немного короче, но не можете избежать шагов 1) получить элемент 2) изменить его значение.

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