Skip to content Skip to sidebar Skip to footer

javascript对HTML字符转义与反转义

1.背景:在项目中,经常遇到一些字符需要进行转义后才能显示到界面上,如“&”,在界面中显示的是“&”,在html中书写“&”,显示在界面的中的依然是“&”。

    这时候,就需要进行转义

2.解决方案

<script>
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,"&");
             s = s.replace(/</g,"<");
             s = s.replace(/>/g,">");
             s = s.replace(/ /g," ");
             s = s.replace(/\'/g,"'");
             s = s.replace(/\"/g,""");
             return s; 
       },
       /*4.用正则表达式实现html解码*/
       htmlDecodeByRegExp:function (str){ 
             var s = "";
             if(str.length == 0) return "";
             s = str.replace(/&/g,"&");
             s = s.replace(/</g,"<");
             s = s.replace(/>/g,">");
             s = s.replace(/ /g," ");
             s = s.replace(/'/g,"\'");
             s = s.replace(/"/g,"\"");
             return s; 
       }
    };
</script>

使用方法:HtmlUtil.htmlDecodeByRegExp(“&amp;”)

原文地址:https://www.cnblogs.com/GumpYan/p/7883133.html

14 Comments

  • hdfilmcehennemi
    Posted 2022-12-08 22:15

    There is noticeably a bundle to know about this. I assume you made certain nice points in features also. Micheal Gonsales

  • freespin
    Posted 2022-08-20 15:01

    I believe this web site contains some really fantastic info for everyone : D. Berry Markins

  • liseli
    Posted 2022-08-20 14:00

    Super-Duper site! I am loving it!! Will come back again. I am bookmarking your feeds also. Scot Ludvigson

  • bahis oyna
    Posted 2022-08-19 20:46

    Hi, I wish for to subscribe for this blog to get latest updates, thus where can i do it please help out. Lamont Tomaszycki

  • kacak bahis siteleri
    Posted 2022-08-16 12:33

    Your method of explaining all in this paragraph is really good, every one can easily be aware of it, Thanks a lot. Karl Berdecia

  • bahis siteleri
    Posted 2022-08-15 05:11

    Major thankies for the blog. Much thanks again. Awesome. Leif Catherman

  • bitcoin
    Posted 2022-08-15 04:47

    Right away I am going to do my breakfast, when having my breakfast coming yet again to read other news. Teodoro Fayne

  • bahis
    Posted 2022-08-09 17:39

    Hi there, its good post about media print, we all know media is a fantastic source of data. Santiago Balogun

  • casino
    Posted 2022-08-07 03:15

    Hi there, I enjoy reading through your article. I like to write a little comment to support you. Rod Ricciardi

  • casino
    Posted 2022-07-31 00:09

    I got what you intend, thankyou for posting. Woh I am lucky to find this website through google. Johnathan Westrope

  • eskort bayan
    Posted 2022-07-30 11:45

    Hurrah! In the end I got a weblog from where I know how to genuinely obtain helpful data regarding my study and knowledge. Philip Wiederhold

  • viagra
    Posted 2022-07-29 18:38

    Im thankful for the article post. Really looking forward to read more. Really Cool. Pete Suellentrop

  • bahis
    Posted 2022-07-29 14:32

    Wow, this article is good, my younger sister is analyzing these kinds of things, therefore I am going to convey her. Pasquale Zsadanyi

  • eskort bayan
    Posted 2022-07-28 14:57

    Pellentesque commodo eros a enim. Ut id nisl quis enim dignissim sagittis. Pellentesque auctor neque nec urna. Nulla neque dolor. Dylan Otega

Leave a comment