Trouble replacing text with JavaScript. Please help

Question

function $(id) { return document.getElementById(id); }
$('h').innerHTML.replace(/hello/g, "<span style='color: red;'>hello</span>");

It doesn't work. What happened?

• Naftali: ummm you have an html element with id=h?

Answer 1

replace returns a string and does not automatically assign it to the element.

$('h').innerHTML = $('h').innerHTML.replace(/hello/g, "<span style='color: red;'>hello</span>");

Answer 2

replace() does not happen in-place; you need to assign the result to the destination you want:

var newText = $('h').innerHTML.replace(/hello/g, "<span style='color: red;'>hello</span>");
// Do something with newText

Answer 3

First of all, you don't need your first function, JQuery takes care of that automatically via a selector. Also, setting innerHTML should replace all the existing content of it anyway, so you don't need to explicitly state replace after that.

$('#h').html(/hello/g, "<span style='color: red;'>hello</span>");

Also, I think your quotes were wrong.

Answer 4

You're not assigning the value back to the element.

Answer 5

Try doing this:

function $(id) { return document.getElementById(id); }
$('h').innerHTML = $('h').innerHTML.replace("hello", "<span style='color: red;'>hello</span>");

fiddle: http://jsfiddle.net/maniator/LBAn6/