How to escape HTML but do not escape character entities?

Question

I have to escape an arbitrary string and then assign to innerHTML.

But the string may has already contain character entities, like

var str1 = "A &amp; B & C";
var str2 = "A &gt; B > C";
var str3 = "A&qout;B&qout; C &qout;";

And I want to get

A & B & C 
A > B > C
A"B" C "

The question is that how to escape "&" but do not escape "& in other character entities"?

possible duplicate of: http://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript — hackerrdave, Apr 16 '17 at 16:54
Why escape if you assign to innerHTML? Only < needs escaping or replacing with < and only if there is no space after it — mplungjan, Apr 16 '17 at 16:54
what about prepared sql statements at api side? than text is text and only interpreted as text, not as script. — TypedSource, Apr 16 '17 at 17:06
@chenyuxian it is an dublicate. they do exactly what you want and what our answers like. — TypedSource, Apr 16 '17 at 17:46
http://www.htmlhelp.com/de/reference/html40/entities/special.html both answers work with each of this special chars if you add the filter, and much more — TypedSource, Apr 16 '17 at 17:58

Julian · Accepted Answer · 2017-04-16T17:56:26.220

0

First unescape, so replace & with &, and then escape.

Example:

function unescapeHtml(unsafe) {
    return unsafe
         .replace(/&amp;/g, "&")
         .replace(/&lt;/g, "<")
         .replace(/&gt;/g, ">")
         .replace(/&quot;/g, '"')
         .replace(/&#039;/g, "'")
      
}

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}
function setText(id, text){

   document.getElementById(id).innerHTML = escapeHtml(unescapeHtml(text))
} 

var str1 = "A &amp; B & C";
var str2 = "A &gt; B > C";
var str3 = "A&amp;B&amp;C"
var str4 = "A&quot;B&quot; C &quot;"
   
setText("container1", str1); 
setText("container2", str2);
setText("container3", str3);
setText("container4", str4);

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>

edited Apr 16 '17 at 17:56

answered Apr 16 '17 at 17:03

Julian

33,915
22
119
174

escaping special chars & and ; not required in javascript regex? – TypedSource Apr 16 '17 at 17:16
if the string is "A&B&C", then do you have any idea how to solve this problem? – cyx Apr 16 '17 at 17:19
@TypedSource It's not needed, see running snippet. – Julian Apr 16 '17 at 17:19
@chenyuxian that one is also working, updated the example – Julian Apr 16 '17 at 17:24
@Julian oh!OK! but it seems like &qout; do not work? – cyx Apr 16 '17 at 17:29
@chenyuxian added `&quot`. Works now – Julian Apr 16 '17 at 17:51
@TypedSource officially I think we should escape `&` and `;`. Not in Javascript, but I doesn't hurt: https://regex101.com/r/1s0TyD/2 – Julian Apr 16 '17 at 17:52

TypedSource · Answer 2 · 2017-04-16T17:33:43.830

0

var str1 = "A &amp; B & C";
var str2 = "A &gt; B > C";
var str3 = "A &amp; B &amp; C &gt; D &lt; X";

str1 = str1.replace(/\&amp\;/g, '&');
str2 = str2.replace(/\&gt\;/g, '>');
str3 = str3.replace(/\&amp\;/g, '&').replace(/\&gt\;/g, '>').replace(/\&lt\;/g, '<');

console.log(str1);
console.log(str2);
console.log(str3);

https://jsfiddle.net/fkherav8/2/

edited Apr 16 '17 at 17:33

answered Apr 16 '17 at 17:11

TypedSource

708
4
12

if the string is "A&B&C", then do you have any idea how to solve this problem? – cyx Apr 16 '17 at 17:19
thank you, but it seems like this method does not work on &qout; ? – cyx Apr 16 '17 at 17:39
i tried it and it works: `.replace(/\&quot\;/g, '"')` https://jsfiddle.net/fkherav8/3/ – TypedSource Apr 16 '17 at 17:43
this is the same approach as mine ;) Maybe a bit less verbose – Julian Apr 16 '17 at 17:52
2

@chenyuxian it's `"` not `&qout` ? ;) – Julian Apr 16 '17 at 17:57
@Julian hmmmm... I think I am too tired, thank you guys – cyx Apr 16 '17 at 18:08

How to escape HTML but do not escape character entities?

2 Answers2