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

一、名词解释
　　HTML实体字符：

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

　　HTML实体字符两种形式：

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

　　数字形式：&#60;

　　实体名形式：&lt;

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

 

二、常见HTML实体字符
　　注释：实体名称大小写敏感！！！

　　显示结果 描述 实体名称 实体编号
  　　空格 &nbsp; &#160;
　　< 小于号 &lt; &#60;
　　> 大于号 &gt; &#62;
　　& 与号 &amp; &#38;
　　" 双引号 &quot; &#34;
　　' 单引号 &apos;（IE不支持） &#39;
　　全部HTML实体字符表，请查看http://www.w3school.com.cn/tags/html_ref_entities.html

 

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

　　什么是XSS攻击

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

 

四、转义、反转义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;
}