您的足迹:首页 > 我的代码 >&#数字..这叫什么HTML Entity 字符实体(字符转义)

&#数字..这叫什么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(十进制)
  &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 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转换为字符 
// 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进制,所以转换时进行分别处理:
 
/**
 * 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); // => (中文)
本博客所有文章如无特别注明均为原创。作者:恶猫复制或转载请以超链接形式注明转自 恶猫的博客
原文地址《&#数字..这叫什么HTML Entity 字符实体(字符转义)

相关推荐

WRITTEN BY

avatar

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)

恶猫的博客 -记录自己日常,代码,美图,电影,音乐,新闻,只是个人博客而已

浙ICP备15011757号-4 网站地图 联系我