JS实现Html转义和反转义（html编码和解码）的方法总结（亲测）

深藏阁楼爱情的钟 2022-01-11 21:11 1482阅读 0赞

### 1、JS实现html转义和反转义主要有两种方式： ###

1）、利用用浏览器内部转换器实现html转义；

2）、用正则表达式实现html转义；

### 2、封装的JS工具类： ###

### 3、测试及效果： ###

1）、html代码：

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）、效果图：

![720466-20190620160516502-422674018.png][]

### 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;
    }

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼  
**博客园同步更新地址：**[https://www.cnblogs.com/willingtolove/p/11059325.html][https_www.cnblogs.com_willingtolove_p_11059325.html]  
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

[720466-20190620160516502-422674018.png]: /images/20220110/ecab93b3c4d94ea7be56684a95d7473b.png
[https_www.cnblogs.com_willingtolove_p_11059325.html]: https://www.cnblogs.com/willingtolove/p/11059325.html