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

Posted 2023-05-07

【中文标题】如何转义 HTML 但不转义字符实体？

【英文标题】：How to escape HTML but do not escape character entities?

【发布时间】：2017-09-12 08:53:39

【问题描述】：

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

但字符串可能已经包含字符实体，例如

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

我想得到

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

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

【问题讨论】：

可能重复：***.com/questions/6234773/…

如果分配给innerHTML，为什么要转义？只有

@hackerrdave 不，这不是我想要的答案:(

@chenyuxian 这是一个副本。他们完全按照您的要求和我们的答案做。

htmlhelp.com/de/reference/html40/entities/special.html 如果您添加过滤器，这两个答案都适用于每个特殊字符，等等

【参考方案1】：

首先取消转义，所以将&替换为&，然后转义。

例子：

function unescapeHtml(unsafe) 
    return unsafe
         .replace(/&/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>

【讨论】：

转义特殊字符 & 和 ;在 javascript 正则表达式中不需要？

如果字符串是“A&B&C”，那么你知道如何解决这个问题吗？

@TypedSource 不需要，看运行sn-p。

@chenyuxian 那一个也在工作，更新了例子

@Julian 哦！好的！但它看起来像 &qout;不工作？

【参考方案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/

【讨论】：

如果字符串是“A&B&C”，那么你知道如何解决这个问题吗？

谢谢，不过这个方法好像在 &qout; ?

我试过了，效果很好：.replace(/\&quot\;/g, '"')jsfiddle.net/fkherav8/3

这和我的方法一样 ;) 可能不那么冗长

@chenyuxian 是" 不是&qout ？ ;)