JS Html转义和反转义(html编码和解码)的实现与使用方法总结


Posted in Javascript onMarch 10, 2020

本文实例讲述了JS Html转义和反转义(html编码和解码)的实现与使用方法。分享给大家供大家参考,具体如下:

1、JS实现html转义和反转义主要有两种方式:

1)、利用用浏览器内部转换器实现html转义;

2)、用正则表达式实现html转义;

2、封装的JS工具类:

var HtmlUtil = {
    /*1.用浏览器内部转换器实现html编码(转义)*/
    htmlEncode:function (html){
      //1.首先动态创建一个容器标签元素,如DIV
      var temp = document.createElement ("div");
      //2.然后将要转换的字符串设置为这个元素的innerText或者textContent
      (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
      //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
      var output = temp.innerHTML;
      temp = null;
      return output;
    },
    /*2.用浏览器内部转换器实现html解码(反转义)*/
    htmlDecode:function (text){
      //1.首先动态创建一个容器标签元素,如DIV
      var temp = document.createElement("div");
      //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
      temp.innerHTML = text;
      //3.最后返回这个元素的innerText或者textContent,即得到经过HTML解码的字符串了。
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    },
    /*3.用正则表达式实现html编码(转义)*/
    htmlEncodeByRegExp:function (str){ 
       var temp = "";
       if(str.length == 0) return "";
       temp = str.replace(/&/g,"&");
       temp = temp.replace(/</g,"<");
       temp = temp.replace(/>/g,">");
       temp = temp.replace(/\s/g," ");
       temp = temp.replace(/\'/g,"'");
       temp = temp.replace(/\"/g,""");
       return temp;
    },
    /*4.用正则表达式实现html解码(反转义)*/
    htmlDecodeByRegExp:function (str){ 
       var temp = "";
       if(str.length == 0) return "";
       temp = str.replace(/&/g,"&");
       temp = temp.replace(/</g,"<");
       temp = temp.replace(/>/g,">");
       temp = temp.replace(/ /g," ");
       temp = temp.replace(/'/g,"\'");
       temp = temp.replace(/"/g,"\"");
       return temp; 
    },
    /*5.用正则表达式实现html编码(转义)(另一种写法)*/
    html2Escape:function(sHtml) {
       return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});
    },
    /*6.用正则表达式实现html解码(反转义)(另一种写法)*/
    escape2Html:function (str) {
       var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
       return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
  };

3、测试及效果:

1)、html代码:

<div>&</div>
<div>&</div>
<div id="testdiv"></div>
<div id="testdiv1"></div>
<div id="testdiv2"></div>

<div id="regdiv"></div>
<div id="regdiv1"></div>
<div id="regdiv2"></div>

<div id="regdiv3"></div>
<div id="regdiv4"></div>
<div id="regdiv5"></div>

2)、js测试代码:

var strHtml='<div style="color:blue">符号:&<div>';
  document.getElementById("testdiv").innerHTML=strHtml;

  var encodedHtml= HtmlUtil.htmlEncode(strHtml);// "<div style="color:blue">符号:&amp;<div>"
  document.getElementById("testdiv1").innerHTML=encodedHtml;

  var decodedHtml=HtmlUtil.htmlDecode(encodedHtml);// '<div style="color:blue">符号:&<div>'
  document.getElementById("testdiv2").innerHTML=decodedHtml;

  var strHtml_1='<div style="color:red">符号:&<div>';
  document.getElementById("regdiv").innerHTML=strHtml_1;

  var encodedHtml_1 =HtmlUtil.htmlEncodeByRegExp(strHtml_1);// "<div style="color:red">符号:&amp;<div>"
  document.getElementById("regdiv1").innerHTML=encodedHtml_1;

  var decodedHtml_1 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_1);// '<div style="color:blue">符号:&<div>'
  document.getElementById("regdiv2").innerHTML=decodedHtml_1;

  var strHtml_2='<div style="color:green">符号:&<div>';
  document.getElementById("regdiv3").innerHTML=strHtml_2;

  var encodedHtml_2 =HtmlUtil.htmlEncodeByRegExp(strHtml_2);// "<div style="color:green">符号:&amp;<div>"
  document.getElementById("regdiv4").innerHTML=encodedHtml_2;

  var decodedHtml_2 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_2);// '<div style="color:green">符号:&<div>'
  document.getElementById("regdiv5").innerHTML=decodedHtml_2;

3)、效果图:

 JS Html转义和反转义(html编码和解码)的实现与使用方法总结

4、其他的一些处理html字符串的常用方法

1)、去掉字符串中的html标签

function removeHtmlTab(tab) {
return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签
}
removeHtmlTab('<div id="test">zyl</div><span>zzc</span>');// zylzzc

2)、回车\r\n转为<br/>标签

function return2Br(str) {
  return str.replace(/\r?\n/g,"<br />");
}

3)、去除开头结尾换行,并将连续3次以上换行转换成2次换行

function trimBr(str) {
  str=str.replace(/((\s| )*\r?\n){3,}/g,"\r\n\r\n");//限制最多2次换行
  str=str.replace(/^((\s| )*\r?\n)+/g,'');//清除开头换行
  str=str.replace(/((\s| )*\r?\n)+$/g,'');//清除结尾换行
  return str;
}

4)、将多个连续空格合并成一个空格

function mergeSpace(str) {
  str=str.replace(/(\s| )+/g,' ');
  return str;
}
Javascript 相关文章推荐
jquery模拟按下回车实现代码
Sep 20 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
webpack打包多页面的方法
Nov 30 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
You might like
php利用反射实现插件机制的方法
2015/03/14 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python对文件操作知识汇总
2016/05/15 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
Notino法国:购买香水和化妆品
2019/04/15 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
护理学专业推荐信
2013/12/03 职场文书
公证书样本
2014/04/10 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
贷款工作证明模板
2015/06/12 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
如何写好活动总结
2019/06/21 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
python自动计算图像数据集的RGB均值
2021/06/18 Python
php去除deprecated的实例方法
2021/11/17 PHP
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
tomcat下部署jenkins的方法
2022/05/06 Servers