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

一、名词解释

HTML实体字符：

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

HTML实体字符两种形式：

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

数字形式：<

实体名形式：<

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

二、常见HTML实体字符

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

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	与号	&	&
"	双引号	"	"
'	单引号	'（IE不支持）	'

全部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, ">");
  s = s.replace(/ /g, " ");
  s = s.replace(/\'/g, "'");//IE下不支持实体名称
  s = s.replace(/\"/g, """);
  return s;
}
 
/**
 *  转义字符还原成html字符
 * @param str
 * @returns {string}
 * @constructor
 */
function htmlRestore(str) {
  var s = "";
  if (str.length === 0) {
    return "";
  }
  s = str.replace(/&/g, "&");
  s = s.replace(/</g, "<");
  s = s.replace(/>/g, ">");
  s = s.replace(/ /g, " ");
  s = s.replace(/'/g, "\'");
  s = s.replace(/"/g, "\"");
  return s;
}
！