js對(duì)html轉(zhuǎn)義和反轉(zhuǎn)義以及編碼和解碼

skinner 發(fā)布于2019-08-02 16:15 / 2019人閱讀

摘要：或者另一個(gè)需求，對(duì)編輯器中的文本進(jìn)行編碼再傳進(jìn)數(shù)據(jù)庫(kù)，或者從庫(kù)中讀取的數(shù)據(jù)需要進(jìn)行解碼才能渲染到網(wǎng)頁(yè)上。這時(shí)候，我們常常就會(huì)使用到轉(zhuǎn)義與反轉(zhuǎn)義，編碼和解碼。

在項(xiàng)目開(kāi)發(fā)過(guò)程中，我會(huì)有時(shí)候遇上這樣的一個(gè)業(yè)務(wù)需求：對(duì)從數(shù)據(jù)庫(kù)中讀取出來(lái)的html數(shù)據(jù)進(jìn)行反轉(zhuǎn)義，才能在當(dāng)前網(wǎng)頁(yè)當(dāng)前進(jìn)行渲染。

或者另一個(gè)需求，對(duì)編輯器中的文本進(jìn)行編碼再傳進(jìn)數(shù)據(jù)庫(kù)，或者從庫(kù)中讀取的數(shù)據(jù)需要進(jìn)行解碼才能渲染到網(wǎng)頁(yè)上。

這時(shí)候，我們常常就會(huì)使用到轉(zhuǎn)義與反轉(zhuǎn)義，編碼和解碼。下面就是我一些項(xiàng)目中的代碼片斷，供參考，希望能給你提供個(gè)思路進(jìn)行問(wèn)題的解決

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

// 項(xiàng)目是2014的項(xiàng)目，依賴(lài)庫(kù)是jquery，并非現(xiàn)在的react/angular/vue,jq版本是1.9.

// Html編碼獲取Html轉(zhuǎn)義實(shí)體
function htmlEncode(value) {
  return $("")
    .text(value)
    .html();
}
// Html解碼獲取Html實(shí)體
function htmlDecode(value) {
  return $("")
    .html(value)
    .text();
}

// 獲取Html轉(zhuǎn)義字符
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, "
");
  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, "
");
  return s;
}