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 相关文章推荐
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
js实现数组转换成json
2015/06/26 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
简单了解python变量的作用域
2019/07/30 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
致200米运动员广播稿
2014/02/06 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
人力资源求职信
2014/05/25 职场文书
2014年党建工作总结
2014/11/11 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
谢师宴家长致辞
2015/07/27 职场文书
合理化建议书范文
2015/09/14 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
ES6 解构赋值的原理及运用
2021/05/25 Javascript