HTML标签转义以及反转义

什么是转义

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

什么是反转义

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

为什么HTML标签需要转义

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

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

    需要在网页中展示html代码

  2. 防止js注入

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

为什么HTML标签需要反转义

  1. 后台设置网页页脚,而页脚内容保存在数据库中,需要动态读出。

    当文本框里面的html被存入数据库时,html标签会被转义成文本,里面仅含有字符。当需要使用时,因将文本中的转义字符反转义成html标签给浏览器解析。

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

从数据库读出html语句时标签全部被转义
数据库读出时状态

浏览器显示而不被解析
浏览器显示

转义实现方法

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

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

反转义实现方法

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

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特殊转义字符对照表

字符 十进制 转义字符 字符 十进制 转义 字符 十进制 转义字符
¡ &#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;
¦ &#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;
« &#171; &laquo; Ë &#203; &Euml; ë &#235; &euml;
¬ &#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;
&#182; &para; Ö &#214; &Ouml; ö &#246; &ouml;
· &#183; &middot; × &#215; &times; ÷ &#247; &divide;
¸ &#184; &cedil; Ø &#216; &Oslash; ø &#248; &oslash;
1 &#185; &sup1; Ù &#217; &Ugrave; ù &#249; &ugrave;
o &#186; &ordm; Ú &#218; &Uacute; ú &#250; &uacute;
» &#187; &raquo; Û &#219; &Ucirc; û &#251; &ucirc;
¼ &#188; &frac14; Ü &#220; &Uuml; ü &#252; &uuml;
½ &#189; &frac12; Ý &#221; &Yacute; ý &#253; &yacute;
¾ &#190; &frac34; Þ &#222; &THORN; þ &#254; &thorn;
¿ &#191; &iquest; ß &#223; &szlig; ÿ &#255; &yuml;
À &#192; &Agrave; à &#224; &agrave;

数据来源

  1. 表格来源:OSCHINA.NET在线工具
最后修改:2019 年 08 月 08 日 09 : 06 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论