关于技术您现在的位置是:首页 > 关于技术

javascript处理HTML的Encode(转码)和Decode(解码)

头像 2019-01-23 18:03:01 796 人已围观 1 条评论

简介

有时候我们做页面需要把代码显示在客户端,比如做一个技术博客。那么,到底如何在网页上显示html代码呢? 这里归 […]

有时候我们做页面需要把代码显示在客户端,比如做一个技术博客。那么,到底如何在网页上显示html代码呢?

这里归纳几种方法,大家根据需求选用:

一、把html代码放在文本区域<textarea>标签中。

直接将html代码放在<textarea></textarea>中,然后可以设置disabled=”disabled”属性,禁止用户编辑即可。

二、把html标签的”<“、”>”用转义字符代替。

把要显示的html代码中的所有”<“、”>”用转义字符”&lt;”、”&gt;”替换掉。如:<div></div>替换为&lt;div&gt;&lt;/div&gt;即可。

三、直接把html代码放在<xmp></xmp>里面即可。

该方法是最简单粗暴的方法,直接用<xmp></xmp>标签包裹即可。但是该方法已经过时,当前主流浏览器支持不是太好。

四、用javascript处理Html的Encode(转码)。

javascript处理HTML的Encode(转码)和Decode(解码),也是今天的分享重点。封装HtmlUtil工具类,方便在开发中使用,代码如下:

var HtmlUtil = {
    /*1.用浏览器内部转换器实现html转码*/
    htmlEncode:function (html){
        //1.首先动态创建一个容器标签元素,如DIV
        var temp = document.createElement ("div");
        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
        (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(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },
    /*3.用正则表达式实现html转码*/
    htmlEncodeByRegExp:function (str){  
         var s = "";
         if(str.length == 0) return "";
         s = str.replace(/&/g,"&amp;");
         s = s.replace(/</g,"&lt;");
         s = s.replace(/>/g,"&gt;");
         s = s.replace(/ /g,"&nbsp;");
         s = s.replace(/\'/g,"&#39;");
         s = s.replace(/\"/g,"&quot;");
         return s;  
   },
   /*4.用正则表达式实现html解码*/
   htmlDecodeByRegExp:function (str){  
         var s = "";
         if(str.length == 0) return "";
         s = str.replace(/&amp;/g,"&");
         s = s.replace(/&lt;/g,"<");
         s = s.replace(/&gt;/g,">");
         s = s.replace(/&nbsp;/g," ");
         s = s.replace(/&#39;/g,"\'");
         s = s.replace(/&quot;/g,"\"");
         return s;  
   }
};

测试代码:

<pre id="code">
 <div>
  <img src="images/a.jpg" alt="图片">
  <p>图片介绍</p>
 </div>
</pre>
var pre = document.getElementById('code');
var str = pre.innerHTML;
var encodeHtml = HtmlUtil.htmlEncodeByRegExp(str);
pre.innerHTML = encodeHtml;
alert(encodeHtml);

运行结果如下:

以上,几种方法,大家根据自我感觉选用,个人比较喜欢用最后Html的Encode(转码)方法。当然除了提到的这几种方法外,还有其他更多更好的方法,我们,加油!

Over~拜

文章评论


  • 1 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论
  • 美女約炮 2020-01-21 11:01:44    

    Undeniably ƅelieve thаt ᴡhich ʏou stated.
    Your favourite reason appeared tߋ be ɑt the internet the simplest thіng to bear in mind օf.
    I say to you, I defіnitely get annoyed whilst οther folks tһink аbout concerns that they
    plainly ԁo not realize about. You managed tо hit the nail uρon tһе hіghest as smartly as defined оut tһe entіrе tһing with no need
    ѕide-effects , other people couⅼԁ taқe а signal.
    Will likely be aցain to get more. Thanks


最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号