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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
js 动态选中下拉框
Nov 26 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
js取整数、取余数的方法
May 11 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
分享Javascript实用方法二
Dec 13 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 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调用三种数据库的方法(2)
2006/10/09 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python使用turtle绘制分形树
2018/06/22 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python操作excel让工作自动化
2019/08/09 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python装饰器的特性原理详解
2019/12/25 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python实现粒子群算法
2020/10/15 Python
化学相关工作求职信
2013/10/02 职场文书
环保倡议书300字
2014/05/15 职场文书
售后服务承诺函格式
2015/01/21 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
交通安全教育主题班会
2015/08/12 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
2019秋季运动会口号
2019/06/25 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang