html entity

🌙
手机阅读
本文目录结构
axihe

html entity 介绍

在编写 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 Entity Name

格式: &entityName;

说明:”&“开头,”;“结尾,以语义的形式描述字符。

如字符”<“,英文名称为”less than”,Entity Name 为"&lt;",取自”less than”2 个单词的首字母。

2 Entity Number

格式: &#entityNumber;

说明:”&#“开头,”;“结尾,以编号的形式描述字符。

此编号可以为十进制或十六进制(以”&#x”开头)等数字格式。

3 示例

<p>字符 :</p>
<p>Entity Name :&lt;</p>
<p>Entity Number(十进制) :&#60;</p>
<p>Entity Number(十六进制) :&#x3c;</p>

字符 :

Entity Name :<

Entity Number(十进制) :<

Entity Number(十六进制) :<

字符与 Entity Name 的互相转换

Entity Name 与 字符的互相转换只能依靠字符对照表转换。更多字符对照表可参考:https://www.freeformatter.com/html-entities.html

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;

字符转换为 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;

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

字符与 Entity Number 的互相转换

字符转换为 Entity Number

String 的实例方法 charCodeAt() 可把指定字符转换为编码:

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

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 搜索

通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang