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