解读：将HTML特殊转义为实体字符的方式

最新推荐文章于 2022-08-17 22:29:36 发布

sakuraxiaoyu

最新推荐文章于 2022-08-17 22:29:36 发布

阅读量1.3k

点赞数 2

分类专栏： web前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_40830369/article/details/121791287

版权

web前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

解读：将HTML特殊转义为实体字符的方式

为什么？

前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把<，>，&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。

转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字符串的主要原因是

“<”和“>”等符号已经用来表示HTML TAG，因此不能直接当作文本中的符号来使用。但有时需求是在HTML页面上使用这些符号，所以需要定义它的转义字符串。
有些字符在ASCII字符集中没有定义（如版权符号“©”）。因此需要使用转义字符（“©”对应的转义字符是“©”）来表示。

举例：

比如我想在页面中显示<div>a</div>，但是实际上在这个id为html的行内文本中，只会显示a.在实际开发中万一遇到类似情况，如果你给一个输入框给用户输入东西，然后把这个东西再重新显示出来，多见于评论系统，你能够保证用户不会输入<div>a</div>？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text</title>
</head>
 
<body>
<span id="html"><div>a</div></span>
</body>
</html>

转码函数：

上述情况的发生，可以运用到转码函数解决。

// 该函数把特殊符号的对象entityMap依次遍历并且存在一个数组里面
var keys = Object.keys || function (obj) {
    obj = Object(obj)
    var arr = []
    for (var a in obj) arr.push(a)
    return arr
}
// 该函数是把特殊符号和转义后的字符进行反转。
// 比如说原来是'＆': '＆amp;'对应，现在是'＆amp;': '＆'对应
var invert = function (obj) {
    obj = Object(obj)
    var result = {}
    for (var a in obj) result[obj[a]] = a
    return result
}
// 把特殊符号和转移后的字符一一对应起来并且存在对象里面
var entityMap = {
    escape: {
        '＆': '＆amp;',
        '<': '＆lt;',
        '>': '＆gt;',
        '"': '＆quot;',
        ' ': '＆nbsp;',
        /*
        如果你之后的WEB程序还涉及到文件名，文件的操作，比如导入导出功能，你最好还是在这个映射表中再添加以下的规则，把半角转成全角，否则可能出错
        '\\' : '＼',
        '/' : '／',
        ':' : '：',
        '*' : '＊',
        '?' : '？',
        '|' : '｜',
        */
    }
}
// 把特殊符号和转义后的字符进行反转后以unescape作为关键字存在entityMap中
entityMap.unescape = invert(entityMap.escape);

var entityReg = {
    escape: RegExp('[' + keys(entityMap.escape).join('') + ']', 'g'),
    unescape: RegExp('(' + keys(entityMap.unescape).join('|') + ')', 'g')
}
// 将HTML转义为实体
function HTMLescape(html) {
    if (typeof html != 'string') return ''
    return html.replace(entityReg.escape, function (match) {
        return entityMap.escape[match]
    })
}
// 将实体转回为HTML
function HTMLunescape(str) {
    if (typeof str != 'string') return ''
    return str.replace(entityReg.unescape, function (match) {
        return entityMap.unescape[match]
    })
}

调用函数：

var a="<div>a</div>";
document.getElementById("html").innerHTML=a;
alert(a);
//把转义之后的字符串，替代原来的字符串，再显示
a=HTMLescape(a);
alert(a);
document.getElementById("html").innerHTML=a;