CODEWITHSUNDEEP
javascripthtmlreplacehtml-entities
VIVA LA NWO
VIVA LA NWO

Reputation: 3912

Converting HTML to its safe entities with Javascript

I'm trying to convert characters like < and > into &lt; and &gt; etc.

User input is taken from a text box, and then copied into a DIV called changer.

here's my code:

function updateChanger() {
    var message = document.getElementById('like').value;
    message = convertHTML(message);
    document.getElementById('changer').innerHTML = message;
}

function convertHTML(input)
{
    input = input.replace('<', '&lt;');
    input = input.replace('>', '&gt;');
    return input;
}

But it doesn't seem to replace >, only <. Also tried like this:

input = input.replace('<', '&lt;').replace('>', '&gt;');

But I get the same result.

Can anyone point out what I'm doing wrong here? Cheers.

Upvotes: 3

Views: 5459

Answers (2)

Jacob
Jacob

Reputation: 78860

A more robust way to do this is to create an HTML text node; that way all of the other potentially invalid content (there's more than just < and >) is converted. For example:

var message = document.getElementById('like').value;
document.getElementById('changer').appendChild(document.createTextNode(message));

UPDATE

You mentioned that your event was firing upon each key press. If that's what's triggering this code, you'll want to remove what was previously in the div before appending the text. An easy way to do that is like this:

var message = document.getElementById('like').value;
var changer = document.getElementById('changer');
changer.innerHTML = '';
changer.appendChild(document.createTextNode(message));

Upvotes: 6

Bug Magnet
Bug Magnet

Reputation: 2668

Try something like this:

function convertHTML(input)
{
  input = input.replace(/>/g, '&gt;');
  input = input.replace(/</g, '&lt;');

  return input;
}

replace only replaces the first occurrence of > or < in the string, in order to replace all occurrences of < or >, use regular expressions with the g param to ensure the entire string is searched for all occurrences of the values.

Upvotes: 1

Related Questions