1.1 介绍
在编写HTML页面时，需要用到"<"、">"、"空格"等符号，直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。
那么就需要把这些字符进行转义，以另一种方式抒写，以相同的形式展现。
在HTML中，这些字符可称为HTML Entity，即HTML 字符实体。一个HTML Entity都含有2种转义格式：Entity Name 和 Entity Number。
可参考MDN关于HTML Entity的解释 ：https://developer.mozilla.org/en-US/docs/Glossary/Entity
1.1.1 Entity Name
格式： &entityName;
说明："&"开头，";"结尾，以语义的形式描述字符。如字符"<"，英文名称为"less than"，Entity Name为"<"，取自"less than"2个单词的首字母。
1.1.2 Entity Number
格式： &#entityNumber;
说明："&#"开头，";"结尾，以编号的形式描述字符。此编号可以为十进制或十六进制(以"&#x"开头)等数字格式。
1.1.3 示例
<p>字符 ：<</p> <p>Entity Name ：<</p> <p>Entity Number(十进制) ：<</p> <p>Entity Number(十六进制) ：<</p>
可看到Entity Name、 Entity Number都在页面显示为"<"字符。
1.2 HTML Entity包括哪些字符呢？
包括但不限于以下字符：ASCII Characters(可见部分)、ISO 8859-1 Characters、ISO 8859-1 Symbols、Math Symbols、Greek Letters、Miscellaneous HTML entities。
在实际编码时不是所有字符都要转义的，比如a-z、A-Z等是没必要转义的。
2. 字符与Entity Name的互相转换
Entity Name 与 字符的互相转换只能依靠字符对照表转换。更多字符对照表可参考：https://www.freeformatter.com/html-entities.html
2.1 ASCII 字符列表：
| Character | Entity Name | Entity Number(十进制) |
| |   | |
| ! | ! | ! |
| " | " | " |
| # | # | # |
| $ | $ | $ |
| % | % | % |
| & | & | & |
| ' | ' | ' |
| ( | ( | ( |
| ) | ) | ) |
| * | * | * |
| + | + | + |
| , | , | , |
| - | ‐ | - |
| . | . | . |
| / | / | / |
| : | : | : |
| ; | ; | ; |
| < | < | < |
| = | = | = |
| > | > | > |
| ? | ? | ? |
| @ | @ | @ |
| [ | [ | [ |
| \ | \ | \ |
| ] | ] | ] |
| ^ | ˆ | ^ |
| _ | _ | _ |
| ` | ` | ` |
| { | { | { |
| | | | | | |
| } | } | } |
| ~ | ˜ | ~ |
2.2 字符转换为Entity Name
|
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
42
43
44
|
// ASCII字符集：char 2 entityName
var
asciiChartSet_c2en = {
' '
:
' '
,
'!'
:
'!'
,
'"'
:
'"'
,
'#'
:
'#'
,
'$'
:
'$'
,
'%'
:
'%'
,
'&'
:
'&'
,
'\''
:
'''
,
'('
:
'('
,
')'
:
')'
,
'*'
:
'*'
,
'+'
:
'+'
,
','
:
','
,
'-'
:
'‐'
,
'.'
:
'.'
,
'/'
:
'/'
,
':'
:
':'
,
';'
:
';'
,
'<'
:
'<'
,
'='
:
'='
,
'>'
:
'>'
,
'?'
:
'?'
,
'@'
:
'@'
,
'['
:
'['
,
'\\'
:
'\'
,
']'
:
']'
,
'^'
:
'ˆ'
,
'_'
:
'_'
,
'`'
:
'`'
,
'{'
:
'{'
,
'|'
:
'|'
,
'}'
:
'}'
,
'~'
:
'˜'
}
// e.g. 字符转换为Entity Name
var
oldStr =
'(中文)'
;
var
newStr = oldStr.replace(/(\D{1})/g,
function
(matched) {
var
rs = asciiChartSet_c2en[matched];
return
rs == undefined ? matched : rs;
});
console.log(newStr);
// => (中文)
|
2.3 Entity Name转换为字符
|
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
42
43
44
|
// ASCII字符集：entityName 2 char
var
asciiChartSet_en2c = {
' '
:
' '
,
'!'
:
'!'
,
'"'
:
'"'
,
'#'
:
'#'
,
'$'
:
'$'
,
'%'
:
'%'
,
'&'
:
'&'
,
'''
:
'\''
,
'('
:
'('
,
')'
:
')'
,
'*'
:
'*'
,
'+'
:
'+'
,
','
:
','
,
'‐'
:
'-'
,
'.'
:
'.'
,
'/'
:
'/'
,
':'
:
':'
,
';'
:
';'
,
'<'
:
'<'
,
'='
:
'='
,
'>'
:
'>'
,
'?'
:
'?'
,
'@'
:
'@'
,
'['
:
'['
,
'\'
:
'\\'
,
']'
:
']'
,
'ˆ'
:
'^'
,
'_'
:
'_'
,
'`'
:
'`'
,
'{'
:
'{'
,
'|'
:
'|'
,
'}'
:
'}'
,
'˜'
:
'~'
,
}
// e.g. Entity Name转换为字符
var
oldStr =
'(中文)'
;
var
newStr = oldStr.replace(/(&.+?;)/g,
function
(matched) {
var
rs = asciiChartSet_en2c[matched];
return
rs == undefined ? matched : rs;
});
console.log(newStr);
// => (中文)
|
3. 字符与Entity Number的互相转换
3.1 字符转换为Entity Number
String的实例方法 charCodeAt() 可把指定字符转换为编码：
|
1
2
|
var
charCode =
'('
.charCodeAt(0);
// => 40
var
entityNumber =
'&#'
+ charCode +
';'
// => (
|
3.2 Entity Number转换为字符
String的静态方法 fromCharCode() 可把指定编码转换为字符，而Entity Number的编码可以为十进制或16进制，所以转换时进行分别处理：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/**
* Entity Number转换为字符
* @param {String} entityNumber entityNumber
*/
var
getCharByEntityNumber =
function
(entityNumber) {
var
num = entityNumber.replace(
'&#'
,
''
).replace(
';'
,
''
);
if
(num.indexOf(
'x'
) == 0) {
num = Number.parseInt(num, 16);
// 16进制转换为10进制
}
else
{
num = Number.parseInt(num);
// 10进制
}
var
char = String.fromCharCode(num);
return
char;
}
// e.g.
var
oldStr =
'(中文)'
;
var
newStr = oldStr.replace(/(&
#\d+;)/g, function(matched) {
return
getCharByEntityNumber(matched);
});
console.log(newStr);
// => (中文)
|