Change inner html on key press javascript

Question

I have following code

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>

Problem is I don't want to replace the old innerHTML with the innerHTML with replace() method instead I want something like this

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

Instead of

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

Do you have to use native JavaScript because jQuery has a .text() function that does what your asking pretty easy. — Jacob Finamore, May 13 '15 at 20:04
possible duplicate of [javascript replace text in the html body](http://stackoverflow.com/questions/5558613/javascript-replace-text-in-the-html-body) — sergdenisov, May 13 '15 at 20:07
@SergeyDenisov The original replace I want to implement is like this 'innerHTML.replace(RegularExpression,"$1");' Where "RegularExpression" is a regular expression which mathes with a number and "$1" is the substring which matched with regular expression — EMM, May 13 '15 at 20:12
Hey EMM, don't forget to choose an answer when your problem has been solved! If it hasn't been solved, please update your question! — John Harding, May 19 '15 at 23:19

John Harding · Answer 1 · 2015-05-13T20:49:20.497

innerHTML either gets or sets the HTML for an element. When using innerHTML like this: innerHTML.replace("this","test") you are actually getting the HTML in the form of a string and applying the replace method to the string. When using innerHTML in the context of Element.innerHTML = you are setting the value of the HTML. See here for reference.

Here's a clean way to implement what you want with 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>

Nice! You could make it even cleaner as `this.innerHTML = this.innerHTML.replace("this","that");` and save yourself that extra DOM crawl. — Thriggle, May 13 '15 at 20:47

score 1 · Answer 2 · answered May 13 '15 at 20:46

When using plain javascript you have to assign something to the innerHTML in order to change it.

The native replace method returns a string, but doesn't modify the DOM.

You can make it a bit shorter, but can't avoid the steps 1) get the element 2) change it's value.

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

score 0 · Answer 3 · answered May 13 '15 at 20:41

jQuery makes this way easier, and unfortunately I don't know of a way to replace text in a string without having to set that string again. I think the most you can do is make your code more readable and only do the element lookup once:

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

Change inner html on key press javascript

3 Answers3