JS对HTML实体字符转义和反转义

一、名词解释

HTML实体字符：

由于在HTML中有些符号是预留的，比如在html中不能直接使用尖括号（‘<’或‘>’），会被误认为标签符号。所以需要通过HTML实体字符去进行替换；

HTML实体字符两种形式：

eg：小于号的HTML实体字符显示方式

数字形式：&#60;

实体名形式：&lt;

注意：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

二、常见HTML实体字符

注释：实体名称大小写敏感！！！

显示结果	描述	实体名称	实体编号
空格	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	与号	&amp;	&#38;
"	双引号	&quot;	&#34;
'	单引号	&apos;（IE不支持）	&#39;

全部HTML实体字符表，请查看http://www.w3school.com.cn/tags/html_ref_entities.html

三、转义实用场景-预防XSS攻击

1、什么是XSS攻击

向页面中植入恶意HTML或者恶意脚本，并且使页面提供给其他用户使用。

2、XSS的分类

四、转义、反转义HTML实体字符

/**
 *  把html转义成HTML实体字符
 * @param str
 * @returns {string}
 * @constructor
 */
function htmlEncode(str) {
  var s = "";
  if (str.length === 0) {
    return "";
  }
  s = str.replace(/&/g, "&");
  s = s.replace(/</g, "&lt;");
  s = s.replace(/>/g, "&gt;");
  s = s.replace(/ /g, "&nbsp;");
  s = s.replace(/\'/g, "&#39;");//IE下不支持实体名称
  s = s.replace(/\"/g, "&quot;");
  return s;
}
 
/**
 *  转义字符还原成html字符
 * @param str
 * @returns {string}
 * @constructor
 */
function htmlRestore(str) {
  var s = "";
  if (str.length === 0) {
    return "";
  }
  s = str.replace(/&amp;/g, "&");
  s = s.replace(/&lt;/g, "<");
  s = s.replace(/&gt;/g, ">");
  s = s.replace(/&nbsp;/g, " ");
  s = s.replace(/&#39;/g, "\'");
  s = s.replace(/&quot;/g, "\"");
  return s;
}
！