如何转义 HTML 但不转义字符实体？

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 & B & C";
var str2 = "A > 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"?

Answer 1

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>

Answer 2

var str1 = "A & B & C";
var str2 = "A > B > C";
var str3 = "A & B & C > D < 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/