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;
}
！