HTML Entity 字符实体(字符转义)

目录

1. HTML Entity

2. 字符与Entity Name的互相转换

3. 字符与Entity Number的互相转换

 

1. HTML Entity

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为"&lt;"，取自"less than"2个单词的首字母。

 

1.1.2 Entity Number

格式： &#entityNumber; 

说明："&#"开头，";"结尾，以编号的形式描述字符。此编号可以为十进制或十六进制(以"&#x"开头)等数字格式。

 

1.1.3 示例

<p>字符 ：<</p>
<p>Entity Name ：&lt;</p>
<p>Entity Number(十进制) ：&#60;</p>
<p>Entity Number(十六进制) ：&#x3c;</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(十进制)
	 	 
!	!	!
"	"	"
#	#	#
$	$	$
%	%	%
&	&	&
'	'	'
(	(	(
)	)	)
*	*	*
+	+	+
,	,	,
-	‐	-
.	.	.
/	/	/
:	:	:
;	;	&#59;
<	&lt;	&#60;
=	&equals;	&#61;
>	&gt;	&#62;
?	&quest;	&#63;
@	&commat;	&#64;
[	&lsqb;	&#91;
\	&bsol;	&#92;
]	&rsqb;	&#93;
^	&circ;	&#94;
_	&lowbar;	&#95;
`	&grave;	&#96;
{	&lcub;	&#123;
|	&verbar;	&#124;
}	&rcub;	&#125;
~	&tilde;	&#126;

 

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 = {     ' ': '&nbsp;',     '!': '&excl;',     '"': '&quot;',     '#': '&num;',     '$': '&dollar;',     '%': '&percnt;',     '&': '&amp;',     '\'': '&apos;',     '(': '&lpar;',     ')': '&rpar;',     '*': '&ast;',     '+': '&plus;',     ',': '&comma;',     '-': '&hyphen;',     '.': '&period;',     '/': '&sol;',     ':': '&colon;',     ';': '&semi;',     '<': '&lt;',     '=': '&equals;',     '>': '&gt;',     '?': '&quest;',     '@': '&commat;',     '[': '&lsqb;',     '\\': '&bsol;',     ']': '&rsqb;',     '^': '&circ;',     '_': '&lowbar;',     '`': '&grave;',     '{': '&lcub;',     '|': '&verbar;',     '}': '&rcub;',     '~': '&tilde;' }   // 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); // => &lpar;中文&rpar;

 

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 = {     '&nbsp;': ' ',     '&excl;': '!',     '&quot;': '"',     '&num;': '#',     '&dollar;': '$',     '&percnt;': '%',     '&amp;': '&',     '&apos;': '\'',     '&lpar;': '(',     '&rpar;': ')',     '&ast;': '*',     '&plus;': '+',     '&comma;': ',',     '&hyphen;': '-',     '&period;': '.',     '&sol;': '/',     '&colon;': ':',     '&semi;': ';',     '&lt;': '<',     '&equals;': '=',     '&gt;': '>',     '&quest;': '?',     '&commat;': '@',     '&lsqb;': '[',     '&bsol;': '\\',     '&rsqb;': ']',     '&circ;': '^',     '&lowbar;': '_',     '&grave;': '`',     '&lcub;': '{',     '&verbar;': '|',     '&rcub;': '}',     '&tilde;': '~', }   // e.g. Entity Name转换为字符 var oldStr = '&lpar;中文&rpar;'; 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); // => (中文)