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

Question

我必须转义任意字符串，然后分配给 innerHTML。

但是字符串可能已经包含了字符实体，比如

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

我想得到

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

问题是如何对“&”进行转义而不对其他字符实体中的“&”进行转义？

Answer 1

先转义，所以把&换成&，然后转义。

示例：

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 &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/

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

How to escape HTML but do not escape character entities?

html

javascript

html-escape-characters