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模板技术
Apr 27 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
微信小程序如何获取地址
Dec 24 Javascript
js实现纯前端压缩图片
Nov 16 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
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
django模板语法学习之include示例详解
2017/12/17 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
六年级数学教学反思
2014/02/03 职场文书
行政助理工作职责范本
2014/03/04 职场文书
个人公开承诺书
2014/03/28 职场文书
查摆剖析材料范文
2014/09/30 职场文书
接收函格式
2015/01/30 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android