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