How to encode a string in JavaScript for displaying in HTML?

Question

Possible Duplicate:
How to escape HTML

How can a string be converted to HTML in JavaScript?

e.g.

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

where safestring now equals "<ohhlook&atme>"

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

You could just append a `document.createTextNode(unsafestring);` — Shmiddty, Jan 02 '13 at 22:13
I don't think this is a duplicate: the suggested original is solving a much more specific question and requires a much more complex solution. — OutstandingBill, Oct 08 '15 at 23:58
best answer is to use `Option` class's `innerHTML` Ref: [How to escape HTML](https://stackoverflow.com/a/22706073/1417185) — Paritosh, Mar 24 '21 at 06:38

score 79 · Accepted Answer · answered Jan 02 '13 at 22:09

79

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

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

answered Jan 02 '13 at 22:09

j08691

204,283
31
260
272

8

This is good for very specific symbols. – gdoron Jan 02 '13 at 22:10
Quotation marks only need to be escaped for use in attributes. – ThiefMaster Jan 02 '13 at 22:11
3

@gdoron that's the point, only 5 characters need to be escaped (ampersand, less than, greater than, single quote, double quotes). – Christophe Jan 02 '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 02 '13 at 22:14
@Christophe, I believe this was just an example. – gdoron Jan 02 '13 at 22:14
2

@gdoron example or not, it's still 5 characters to escape. – Christophe Jan 02 '13 at 22:19
I think this solution is best. function toText (html) { var tmp = document.createElement("div"); tmp.appendChild(document.createTextNode(html)); return tmp.innerHTML; } – Akash Bose Nov 06 '17 at 15:03

gdoron · Answer 2 · 2017-11-21T09:58:42.390

40

If you want to use a library rather than doing it yourself:

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 write it yourself.

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

edited Nov 21 '17 at 09:58

answered Jan 02 '13 at 22:08

gdoron

147,333
58
291
367

15

This requires jQuery which a) the question isn't tagged with and b) isn't needed. – j08691 Jan 02 '13 at 22:12
3

@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 02 '13 at 22:13
4

Agree with @j08691, it works but it's just a heavy workaround. Why the upvotes? – Christophe Jan 02 '13 at 22:21
@Christophe, though it was an old comment. People upvote when something helped them. – gdoron Sep 27 '16 at 18:41

score 38 · Answer 3 · answered Jan 02 '13 at 22:17

38

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

document.body.appendChild(document.createTextNode("Your&funky<text>here"))

answered Jan 02 '13 at 22:17

Oleg V. Volkov

21,719
4
44
68

+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 02 '13 at 22:36
1

So great! An easy way around encoding :) – Chris Allinson May 26 '17 at 22:10
1

Additionally ```document.createTextNode("textHere").textContent``` will return the string value – Elnoor Dec 23 '22 at 00:35

ThiefMaster · Answer 4 · 2016-07-14T18:04:59.203

16

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.

edited Jul 14 '16 at 18:04

answered Jan 02 '13 at 22:10

ThiefMaster

310,957
84
592
636

1

I love that second "magic" version with the jQuery "hack." LOVE. IT. Thanks! – jaressloo Apr 22 '14 at 04:29
1

Does anyone know if there is there any performance difference between the two? Is the jquery one slower? – Alexandru Severin Jul 14 '16 at 18:04

score -5 · Answer 5 · answered Jan 02 '13 at 22:06

-5

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

Therefore, your "magic" code is:

safestring = unsafestring.replace(/</g,'&lt;');

answered Jan 02 '13 at 22:06

Niet the Dark Absol

320,036
81
464
592

6

Wrong: you still need to escape `&`. – cdhowie Jan 02 '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 02 '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 02 '13 at 22:10
7

I don't consider allowing input to result in invalid markup to be harmless. – cdhowie Jan 02 '13 at 22:10

How to encode a string in JavaScript for displaying in HTML?

5 Answers5

If you want to use a library rather than doing it yourself:

Linked