01前端/JS - 预留字符和转义字符转换

字符实体(Entity)

转义字符(Escape Sequence)也称字符实体 (Character Entity)。

定义转义字符串的主要原因是:

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

字符实体表:Character Entity Reference Chart

空格实体(space entity)

  • &nbsp; :不换行空格(No-Break Space),它是按下 space 键产生的空格,占据宽度受字体影响明显而强烈。
  • &emsp; :全角空格(Em Space),em 是字体排印学的计量单位,相当于当前指定的点数。例如,1em 在 16px 的字体中就是 16px。占据的宽度正好是1 个中文宽度,而且基本上不受字体影响。
  • &ensp; :半角空格(En Space),en 是字体排印学的计量单位,为 em 宽度的一半。名义上是小写字母 n 的宽度。其占据的宽度正好是 1/2 个中文宽度,而且基本上不受字体影响。
  • &thinsp; :窄空格(Thin Space),占 em 的 1/6 宽。
  • &zwnj; :零宽不连字(Zero Width Non Joiner),是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。
  • &zwj; :零宽连字(Zero Width Joiner),是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。

预留字符(Reserved characters)

预留字符表:

Character Entity
& &amp;
< &lt;
> &gt;
" &quot;

转换方法

方法一:映射表 + 正则替换

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: {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&apos;'
}
}
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]
})
}
// 将实体转回为HTML
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace(entityReg.unescape, function(match) {
return entityMap.unescape[match]
})
}

方法二:利用浏览器 DOM API(只能在浏览器跑,只能转换部分字符)

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;
}
// 将实体转回为HTML
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText || elem.textContent
}

参考