- HTML Entity
- 字符与Entity Name的互相转换
- 字符与Entity Number的互相转换
- 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为"<"，取自"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等是没必要转义的。
- 字符与Entity Name的互相转换
Entity Name 与 字符的互相转换只能依靠字符对照表转换。更多字符对照表可参考：https://www.freeformatter.com/html-entities.html
2.1 ASCII 字符列表：
Character Entity Name Entity Number(十进制)
 
! ! !
" " "
# #
$ $ $
% % %
& & &
' ' '
( ( (
) ) )
* *
+ + +
, , ,
- ‐ -
. . .
/ / /
: : :
; ; ;
< < <
= = =
> > >
? ? ?
@ @ @
[ [ [
\ \ \
] ] ]
^ ˆ ^
_ _ _
` ` `
{ { {
| | |
} } }
~ ˜ ~
2.2 字符转换为Entity Name
// ASCII字符集：char 2 entityName
var asciiChartSet_c2en = {
' ': ' ',
'!': '!',
'"': '"',
'#': '#',
'$': '$',
'%': '%',
'&': '&',
'\'': ''',
'(': '(',
')': ')',
'': '*',
'+': '+',
',': ',',
'-': '‐',
'.': '.',
'/': '/',
':': ':',
';': ';',
'<': '<',
'=': '=',
'>': '>',
'?': '?',
'@': '@',
'[': '[',
'\': '\',
']': ']',
'^': 'ˆ',
'_': '_',
'': '&grave;',<br /> '{': '&lcub;',<br /> '|': '&verbar;',<br /> '}': '&rcub;',<br /> '~': '&tilde;'<br /> }<br /> <br /> // e.g. 字符转换为Entity Name<br /> var oldStr = '(中文)';<br /> var newStr = oldStr.replace(/(\D{1})/g, function(matched) {<br /> var rs = asciiChartSet_c2en[matched];<br /> return rs == undefined ? matched : rs;<br /> });<br /> console.log(newStr); // => &lpar;中文&rpar;<br /> <br /> <br /> 2.3 Entity Name转换为字符 <br /> // ASCII字符集：entityName 2 char<br /> var asciiChartSet_en2c = {<br /> '&nbsp;': ' ',<br /> '&excl;': '!',<br /> '&quot;': '"',<br /> '&num;': '#',<br /> '&dollar;': '$',<br /> '&percnt;': '%',<br /> '&amp;': '&',<br /> '&apos;': '\'',<br /> '&lpar;': '(',<br /> '&rpar;': ')',<br /> '&ast;': '*',<br /> '&plus;': '+',<br /> '&comma;': ',',<br /> '&hyphen;': '-',<br /> '&period;': '.',<br /> '&sol;': '/',<br /> '&colon;': ':',<br /> '&semi;': ';',<br /> '&lt;': '<',<br /> '&equals;': '=',<br /> '&gt;': '>',<br /> '&quest;': '?',<br /> '&commat;': '@',<br /> '&lsqb;': '[',<br /> '&bsol;': '\\',<br /> '&rsqb;': ']',<br /> '&circ;': '^',<br /> '&lowbar;': '_',<br /> '&grave;': '',
'{': '{',
'|': '|',
'}': '}',
'˜': '~',
}
// 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); // => (中文)
- 字符与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进制，所以转换时进行分别处理：
/*
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); // => (中文)
发表评论