首页 > Web开发 > 详细

HTML Entity

时间:2019-08-12 22:39:04      阅读:109      评论:0      收藏:0      [点我收藏+]

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(十进制)
      &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

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

 转自https://www.cnblogs.com/polk6/p/html-entity.html

HTML Entity

原文:https://www.cnblogs.com/gopark/p/11342753.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!