Converting HTML to its safe entities with Javascript - Stack Overflow

admin管理员组

文章数量:1326332

I'm trying to convert characters like < and > into < and > 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.

I'm trying to convert characters like < and > into < and > 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.

• javascript
• html
• replace
• html-entities

Share Improve this question Follow edited Jun 18, 2010 at 0:53 Marcel Korpel 21.8k66 gold badges6262 silver badges8080 bronze badges asked Jun 18, 2010 at 0:51 VIVA LA NWOVIVA LA NWO 3,92266 gold badges2525 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

Try something like this:

function convertHTML(input)
{
  input = input.replace(/>/g, '>');
  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.

本文标签： Converting HTML to its safe entities with JavascriptStack Overflow