资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JS实现html转义和反转义的方法

小编给大家分享一下JS实现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(/\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代码:

&
&

2)、js测试代码:

var strHtml='符号:&
';   document.getElementById("testdiv").innerHTML=strHtml;   var encodedHtml= HtmlUtil.htmlEncode(strHtml);// "<div >符号:&amp;<div>"   document.getElementById("testdiv1").innerHTML=encodedHtml;   var decodedHtml=HtmlUtil.htmlDecode(encodedHtml);// '符号:&
'   document.getElementById("testdiv2").innerHTML=decodedHtml;   var strHtml_1='符号:&
';   document.getElementById("regdiv").innerHTML=strHtml_1;   var encodedHtml_1 =HtmlUtil.htmlEncodeByRegExp(strHtml_1);// "<div >符号:&amp;<div>"   document.getElementById("regdiv1").innerHTML=encodedHtml_1;   var decodedHtml_1 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_1);// '符号:&
'   document.getElementById("regdiv2").innerHTML=decodedHtml_1;   var strHtml_2='符号:&
';   document.getElementById("regdiv3").innerHTML=strHtml_2;   var encodedHtml_2 =HtmlUtil.htmlEncodeByRegExp(strHtml_2);// "<div >符号:&amp;<div>"   document.getElementById("regdiv4").innerHTML=encodedHtml_2;   var decodedHtml_2 =HtmlUtil.htmlDecodeByRegExp(encodedHtml_2);// '符号:&
'   document.getElementById("regdiv5").innerHTML=decodedHtml_2;

3)、效果图:

 JS实现html转义和反转义的方法

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

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

function removeHtmlTab(tab) {
return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签
}
removeHtmlTab('zylzzc');// zylzzc

2)、回车\r\n转为
标签

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

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可以做什么

1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 2.可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 3.可以根据用户的操作,动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。

以上是“JS实现html转义和反转义的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文标题:JS实现html转义和反转义的方法
网页URL:http://cdkjz.cn/article/ipsgeg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220