js對html轉義和反轉義以及編碼和解碼

在項目開發過程中，我會有時候遇上這樣的一個業務需求：對從數據庫中讀取出來的html數據進行反轉義，才能在當前網頁當前進行渲染。

或者另一個需求，對編輯器中的文本進行編碼再傳進數據庫，或者從庫中讀取的數據需要進行解碼才能渲染到網頁上。

這時候，我們常常就會使用到轉義與反轉義，編碼和解碼。下面就是我一些項目中的代碼片斷，供參考，希望能給你提供個思路進行問題的解決

/** JQuery Html Encoding、Decoding
* 原理是利用JQuery自帶的html()和text()函數可以轉義Html字符
* 虛擬一個Div通過賦值和取值來得到想要的Html編碼或者解碼
*/

// 項目是2014的項目，依賴庫是jquery，並非現在的react/angular/vue,jq版本是1.9.

// Html編碼獲取Html轉義實體
function htmlEncode(value) {
  return $("<div/>")
    .text(value)
    .html();
}
// Html解碼獲取Html實體
function htmlDecode(value) {
  return $("<div/>")
    .html(value)
    .text();
}

// 獲取Html轉義字符
function htmlEncode(html) {
  return document.createElement("a").appendChild(document.createTextNode(html))
    .parentNode.innerHTML;
}
// 獲取Html
function htmlDecode(html) {
  var a = document.createElement("a");
  a.innerHTML = html;
  return a.textContent;
}

// 編碼
function html_encode(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, '"');
  s = s.replace(/\n/g, "<br>");
  return s;
}

//解碼
function html_decode(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, '"');
  s = s.replace(/<br>/g, "\n");
  return s;
}