你的位置:首页 > 软件开发 > 网页设计 > HTML Entity 字符实体(字符转义)

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

发布时间:2017-11-29 18:00:39
目录1. HTML Entity2. 字符与Entity Name的互相转换3. 字符与Entity Number的互相转换 1. HTML Entity1.1 介绍在编写HTML页面时,需要用到"<"、">"、&quo ...

目录

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>

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

可看到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 字符列表:

CharacterEntity NameEntity Number(十进制)
     &nbsp;&#32;
!    &excl;&#33;
"    &quot;&#34;
#    &num;&#35;
$    &dollar;&#36;
%    &percnt;&#37;
&    &amp;&#38;
'    &apos;&#39;
(    &lpar;&#40;
)    &rpar;&#41;
*    &ast;&#42;
+    &plus;&#43;
,    &comma; &#44;
-    &hyphen; &#45;
.    &period;&#46;
/    &sol; &#47;
:    &colon;&#58;
;    &semi;&#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

// ASCII字符集:char 2 entityNamevar 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 Namevar 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 charvar 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() 可把指定字符转换为编码:

var charCode = '('.charCodeAt(0); // => 40var 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 = '&#40;中文&#41;';var newStr = oldStr.replace(/(&#\d+;)/g, function(matched) { return getCharByEntityNumber(matched);});console.log(newStr); // => (中文)

 

==================================系列文章==========================================

本篇文章:1.8 HTML Entity 字符实体(字符转义)

Web开发之路系列文章

 

原标题:HTML Entity 字符实体(字符转义)

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。