Take the 2-minute tour ×

Possible Duplicate:
How to escape HTML

How can a string be converted to HTML in JavaScript?


var unsafestring = "<oohlook&atme>";
var safestring = magic(unsafestring);

where safestring now equals "&lt;ohhlook&amp;atme&gt;"

I am looking for magic(...). I am not using JQuery for magic.

share|improve this question
You could just append a document.createTextNode(unsafestring); –  Shmiddty Jan 2 '13 at 22:13
escape("<oohlook&atme>") Anyone? –  Derek 朕會功夫 Jan 2 '13 at 22:14
@Derek That makes unsafe string url safe but not html safe. –  James Jan 2 '13 at 22:19
add comment

marked as duplicate by Felix Kling, Shmiddty, Jefffrey, false, Mudassir Jan 3 '13 at 10:01


5 Answers

up vote 5 down vote accepted
function htmlEntities(str) {

So then with var unsafestring = "<oohlook&atme>"; you would use htmlEntities(unsafestring);

share|improve this answer
This is good for very specific symbols. –  gdoron Jan 2 '13 at 22:10
Quotation marks only need to be escaped for use in attributes. –  ThiefMaster Jan 2 '13 at 22:11
@gdoron that's the point, only 5 characters need to be escaped (ampersand, less than, greater than, single quote, double quotes). –  Christophe Jan 2 '13 at 22:13
Nope.. you can safely use any quotes literally if you do not need to use the escaped string within an argument... –  ThiefMaster Jan 2 '13 at 22:14
@Christophe, I believe this was just an example. –  gdoron Jan 2 '13 at 22:14
show 1 more comment

The most commonly used way is using jQuery for this purpose:

var safestring = $('<div>').text(unsafestring).html();

If you want to to encode all the HTML entities you will have to use a library or right it yourself.

You can use a more compact library than jQuery, like HTML Encoder and Decode

share|improve this answer
This requires jQuery which a) the question isn't tagged with and b) isn't needed. –  j08691 Jan 2 '13 at 22:12
@j08691, Yes, I noticed the missing tag, it still doesn't say it's not the best option, cuz he will need a library, and the most powerful js lib can do that as well. –  gdoron Jan 2 '13 at 22:13
Agree with @j08691, it works but it's just a heavy workaround. Why the upvotes? –  Christophe Jan 2 '13 at 22:21
@Derek you made my day :-) –  Christophe Jan 2 '13 at 23:12
add comment

Do not bother with encoding. Use a text node instead. Data in text node is guaranteed to be treated as text.

share|improve this answer
+1 excellent point, although it's not clear from the question whether the OP just needs a text node or needs to combine the resulting string with others. –  Christophe Jan 2 '13 at 22:36
add comment

You need to escape < and &. Escaping > too doesn't hurt:

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

Or you let the DOM engine do the dirty work for you (using jQuery because I'm lazy):

function magic(input) {
    return $('<span/>').text(input).html();

What this does is creating a dummy element, assigning your string as its textContent (i.e. no HTML-specific characters have side effects since it's just text) and then you retrieve the HTML content of that element - which is the text but with special characters converted to HTML entities in cases where it's necessary.

share|improve this answer
add comment

The only character that needs escaping is <. (> is meaningless outside of a tag).

Therefore, your "magic" code is:

safestring = unsafestring.replace(/</g,'&lt;');
share|improve this answer
Wrong: you still need to escape &. –  cdhowie Jan 2 '13 at 22:08
I guess I'm used to allowing users to use character entities, since they're harmless. –  Niet the Dark Absol Jan 2 '13 at 22:09
I don't think this is what the OP was asking. "How can a string be converted to HTML in JavaScript?" Not, "How can THIS string be converted to HTML in JavaScript?" He wants a general solution. –  Pete Jan 2 '13 at 22:10
I don't consider allowing input to result in invalid markup to be harmless. –  cdhowie Jan 2 '13 at 22:10
add comment
