前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把<，>，&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。
转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字符串的主要原因是
这里提供两个函数escape和unescape，分别实现将HTML转义为实体和回转。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
var keys = Object.keys || function(obj) { obj = Object(obj) var arr = [] for (var a in obj) arr.push(a) return arr}var invert = function(obj) { obj = Object(obj) var result = {} for (var a in obj) result[obj[a]] = a return result}var entityMap = { escape: { ‘&‘: ‘&‘, ‘<‘: ‘<‘, ‘>‘: ‘>‘, ‘"‘: ‘"‘, "‘": ‘‘‘ }}entityMap.unescape = invert(entityMap.escape)var entityReg = { escape: RegExp(‘[‘ + keys(entityMap.escape).join(‘‘) + ‘]‘, ‘g‘), unescape: RegExp(‘(‘ + keys(entityMap.unescape).join(‘|‘) + ‘)‘, ‘g‘)}// 将HTML转义为实体function escape(html) { if (typeof html !== ‘string‘) return ‘‘ return html.replace(entityReg.escape, function(match) { return entityMap.escape[match] })}// 将实体转回为HTMLfunction unescape(str) { if (typeof str !== ‘string‘) return ‘‘ return str.replace(entityReg.unescape, function(match) { return entityMap.unescape[match] }) } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 将HTML转义为实体function escape(html){ var elem = document.createElement(‘div‘) var txt = document.createTextNode(html) elem.appendChild(txt) return elem.innerHTML;}// 将实体转回为HTMLfunction unescape(str) { var elem = document.createElement(‘div‘) elem.innerHTML = str return elem.innerText || elem.textContent} |
有个缺陷是只能转义“< > & ”，对于单引号，双引号都不转义。另外一些非ASCII也不能转义。选择时须注意。
比较：
方式1 代码量较大，但灵活性，完整性都比方式2强。可根据需求添加或减少映射表entityMap，且可以运行在任意JS环境中。
方式2 为hack方式，代码量少很多，利用浏览器内部API就行了转义和转回（主流浏览器都支持）。不具完整性，很明显只能在浏览器环境中使用（比如不能在Node.js中跑）。
转自：https://www.cnblogs.com/snandy/p/3200433.html
原文：https://www.cnblogs.com/zhiqinlv/p/15043349.html