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(十进制) ：<</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(十进制)
	 
!	!	!
"	"	"
#	#	#
$	$	$
%	%	%
&	&	&
'	'	'
(	(	(
)	)	)
*	*	*
+	+	+
,	,	,
-	‐	-
.	.	.
/	/	/
:	:	:
;	;	;
<	&lt;	<
=	&equals;	=
>	&gt;	>
?	&quest;	?
@	&commat;	@
[	&lsqb;	[
\	&bsol;	\
]	&rsqb;	]
^	&circ;	^
_	&lowbar;	_
`	&grave;	`
{	&lcub;	{
|	&verbar;	|
}	&rcub;	}
~	&tilde;	~

2.2 字符转换为Entity Name

// ASCII字符集：char 2 entityName
var asciiChartSet_c2en = {
    ' ': ' ',
    '!': '!',
    '"': '"',
    '#': '#',
    '$': '$',
    '%': '%',
    '&': '&',
    '\'': ''',
    '(': '(',
    ')': ')',
    '*': '*',
    '+': '+',
    ',': ',',
    '-': '‐',
    '.': '.',
    '/': '/',
    ':': ':',
    ';': ';',
    '<': '&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转换为字符

// ASCII字符集：entityName 2 char
var asciiChartSet_en2c = {
    ' ': ' ',
    '!': '!',
    '"': '"',
    '#': '#',
    '$': '$',
    '%': '%',
    '&': '&',
    ''': '\'',
    '(': '(',
    ')': ')',
    '*': '*',
    '+': '+',
    ',': ',',
    '‐': '-',
    '.': '.',
    '/': '/',
    ':': ':',
    ';': ';',
    '&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() 可把指定字符转换为编码：

var charCode = '('.charCodeAt(0); // => 40
var entityNumber = '&#' + charCode + ';' // => (

3.2  Entity Number转换为字符

String的静态方法 fromCharCode() 可把指定编码转换为字符，而Entity Number的编码可以为十进制或16进制，所以转换时进行分别处理：

/**
 * 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); // => (中文)

End

Web开发之路系列文章

菜单加载中...