HTML标签转义以及反转义

Author：碧云天
发布时间：August 5, 2019
2353views
No comments
4606 words
Categories： JavaScript

### 什么是转义

在编程中一些具有特殊意义的字符，例如`\n`表示换行，`\t`表示前进一个tab，等等。
而转义在HTML中亦是如此，在HTML中如果我们想在网页上显示一个&lt;，我们需要输入`&lt;`，&#62;则要输入`&gt;`，这都是转义的结果。

### 什么是反转义

在一些场合我们需要把转义字符成所表示的形式，例如把`&lt;`转换成&lt;，这就是反转义。

### 为什么HTML标签需要转义

在一些特定的场合，我们需要对标签进行转义，例如：

1. 在网页中显示html代码而不被浏览器解析
> 需要在网页中展示html代码

2. 防止js注入
> 在一些输入框中，防止用户因输入执行木马脚本而导致一系列严重后果，因为我们并不知道用户到底会输入什么。

### 为什么HTML标签需要反转义

1. 后台设置网页页脚，而页脚内容保存在数据库中，需要动态读出。
> 当文本框里面的html被存入数据库时，html标签会被转义成文本，里面仅含有字符。当需要使用时，因将文本中的转义字符反转义成html标签给浏览器解析。

2. js从后台获取的url会被转义

从数据库读出html语句时标签全部被转义
![数据库读出时状态](https://img.bikteen.com/images/2019/12/04/p1.png)

浏览器显示而不被解析
![浏览器显示](https://img.bikteen.com/images/2019/12/04/p2.png)

### 转义实现方法

为了能在浏览器中显示html代码而不被解析，我们需要把html标签进行转义，由于只是前端操作，这里使用js并使用正则表达式进行转义

```javascript
function HtmlToEscape(html) {
    var map = {
        '<':'&lt;',
        '>':'&gt;',
        '&':'&amp;',
        '"':'&quot;',
        ' ': '&nbsp;',
        //此处还可继续添加需要转义的字符
    }
    return html.replace(/[<>&"\s]/g, function(char) {return map[char];});
}
```

### 反转义实现方法

反转义只需反向操作即可，也就是方法里面的map反过来写，正则改一下就行

```javascript
function EscapeToHtml(html) {
    var map = {
        'lt':'<',
        'gt':'>',
        'nbsp':' ',
        'amp':'&',
        'quot':'"',
        //此处还可继续添加需要反转义的字符
    }
    return html.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(char) {return map[char];});
}
```

### 附：HTML转义字符

#### HTML常用转义字符

| 字符	| 十进制	| 转义字符|
| ---- | ----- | -------|
| "	| `&#34;`	| `&quot;`| 
| &	| `&#38;`	| `&amp;`| 
| <	| `&#60;`| 	`&lt;`| 
| >	| `&#62;`| 	`&gt;`| 
| 不断开空格(non-breaking space)| `&#160;`| `&nbsp;`|

#### HTML特殊转义字符对照表

| 字符 |  十进制 | 转义字符 | 字符 | 十进制 | 转义 | 字符	| 十进制 | 转义字符 |
| ---- |  ----- | ------- | ---- | ----- | -----| ---- | ----- | ------- |
| &iexcl;	| `&#161;`	| `&iexcl;`	| Á	| `&#193;`	| `&Aacute;`| á	| `&#225;`	| `&aacute;`| 
| ￠	| `&#162;`	| `&cent;`	| Â	| `&#194;`	| `&circ;`	| â	| `&#226`	| `&acirc;`| 
| ￡	| `&#163;`	| `&pound;`	| Ã	| `&#195;`	| `&Atilde;`	| ã	| `&#227;`	| `&atilde;`| 
| ¤	| `&#164;`	| `&curren;` | Ä	| `&#196;`	| `&Auml;`	| ä	| `&#228;`	| `&auml;`| 
| ￥	| `&#165;`	| `&yen;`	| Å	| `&#197;`	| `&ring;`	| å	| `&#229;`	| `&aring;`| 
| &brvbar;| `&#166;`	| `&brvbar;`	| Æ	| `&#198;`	| `&AElig;`	| æ	| `&#230;`	| `&aelig;`| 
| §	| `&#167;`	| `&sect;`| Ç	| `&#199;`	| `&Ccedil;`	| ç	| `&#231;`	| `&ccedil;`| 
| ¨	| `&#168;`	| `&uml;`	| È	| `&#200;`	| `&Egrave;`	| è	| `&#232;`	| `&egrave;`| 
| ©	| `&#169;`	| `&copy;`	| É	| `&#201;`	| `&Eacute;	`| é	| `&#233;`	| `&eacute;`| 
| a	| `&#170;`	| `&ordf;`	| Ê	| `&#202;`	| `&Ecirc;`	| ê	| `&#234;`	| `&ecirc;`| 
| &laquo;	| `&#171;`	| `&laquo;`	| Ë	| `&#203;`	| `&Euml;`	| ë	| `&#235;`	| `&euml;`| 
| &not;	| `&#172;`	| `&not;`| Ì	| `&#204;`	| `&Igrave;`	| ì	| `&#236;`	| `&igrave;`| 
| /x7f	| `&#173;`	| `&shy;`	| Í	| `&#205;`	| `&Iacute;`	| í	| `&#237;`	| `&iacute;`| 
| ®	| `&#174;`	| `&reg;`| Î	| `&#206;`	| `&Icirc;`	| î	| `&#238;`	| `&icirc;`| 
| ˉ	| `&#175;`	| `&macr;`| Ï	| `&#207;`	| `&Iuml;`	| ï	| `&#239;`	| `&iuml;`| 
| °	| `&#176;`	| `&deg;`	| Ð	| `&#208;`	| `&ETH;`	| ð	| `&#240;`	| `&ieth;`| 
| ±	| `&#177;`	| `&plusmn;`	| Ñ	| `&#209;`	| `&Ntilde;`	| ñ	| `&#241;`	| `&ntilde;`| 
| 2	| `&#178;`	| `&sup2;`	| Ò	| `&#210;`	| `&Ograve;`	| ò	| `&#242;`	| `&ograve;`| 
| 3	| `&#179;`	| `&sup3;`	| Ó	| `&#211;`	| `&Oacute;`	| ó	| `&#243;`	| `&oacute;`| 
| ′	| `&#180;`	| `&acute;`	| Ô	| `&#212;`	| `&Ocirc;`	| ô	| `&#244;`	| `&ocirc;`| 
| μ	| `&#181;`	| `&micro;`	| Õ	| `&#213;`	| `&Otilde;`	| õ	| `&#245;`	| `&otilde;`| 
| &para;	| `&#182;`	| `&para;`	| Ö	| `&#214;`	| `&Ouml;`	| ö	| `&#246;`	| `&ouml;`| 
| ·	| `&#183;`	| `&middot;`	| &times;	| `&#215;`	| `&times;`	| ÷	| `&#247;`	|`&divide;`| 
| &cedil;	| `&#184;`	| `&cedil;`	| Ø	| `&#216;`	| `&Oslash;	`| ø	| `&#248;`	| `&oslash;`| 
| 1	| `&#185;`	| `&sup1;`	| Ù	| `&#217;`	| `&Ugrave;	`| ù	| `&#249;`	| `&ugrave;`| 
| o	| `&#186;`	| `&ordm;`	| Ú	| `&#218;`	| `&Uacute;`	| ú	| `&#250;`	| `&uacute;`| 
| &raquo;	| `&#187;`	| `&raquo;`	| Û	| `&#219;`	| `&Ucirc;`	| û	| `&#251;`	| `&ucirc;`| 
| &frac14;	| `&#188;`	| `&frac14;`	| Ü	| `&#220;`	| `&Uuml;`	| ü	| `&#252;`	| `&uuml;`| 
| &frac12;	| `&#189;`	| `&frac12;	`| Ý	| `&#221;`	| `&Yacute;`	| ý	| `&#253;`	| `&yacute;`| 
| &frac34;	| `&#190;`	| `&frac34;`	| Þ	| `&#222;`	| `&THORN;`	| þ	| `&#254;`	| `&thorn;`| 
| &iquest;	| `&#191;`	| `&iquest;`	| ß	| `&#223;`	| `&szlig;`	| ÿ	| `&#255;`	| `&yuml;`| 
| À	| `&#192;`	| `&Agrave;`	| à	| `&#224;`	| `&agrave;`|   |           |          |

### 数据来源

1. 表格来源：[OSCHINA.NET在线工具](https://tool.oschina.net/commons?type=2)

Last modification：December 4th, 2019 at 09:31 pm

如果觉得我的文章对你有用，请随意赞赏