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(十进制) :<</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等是没必要转义的。

2. 字符与Entity Name的互相转换

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

2.1 ASCII 字符列表:

Character Entity Name Entity Number(十进制)
      &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; ~

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 = '(中文)';
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的更多相关文章

  1. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  2. Entity Framework Core 1.1 升级通告

    原文地址:https://blogs.msdn.microsoft.com/dotnet/2016/11/16/announcing-entity-framework-core-1-1/ 翻译:杨晓东 ...

  3. Entity Framework Core 实现MySQL 的TimeStamp/RowVersion 并发控制

    将通用的序列号生成器库 从SQL Server迁移到Mysql 遇到的一个问题,就是TimeStamp/RowVersion并发控制类型在非Microsoft SQL Server数据库中的实现.SQ ...

  4. 采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)

    前言 Entity Framework 延伸系列目录 今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC Mi ...

  5. 来,给Entity Framework热热身

    先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...

  6. 采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延伸系列2)

    前言 Entity Framework 延伸系列目录 今天我们来讲讲EntityFramework.Extended 首先科普一下这个EntityFramework.Extended是什么,如下: 这 ...

  7. Entity Framework教程(第二版)

    源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...

  8. 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程

    读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...

  9. Entity Framework 6 Recipes 2nd Edition 译 -> 目录 -持续更新

    因为看了<Entity Framework 6 Recipes 2nd Edition>这本书前面8章的翻译,感谢china_fucan. 从第九章开始,我是边看边译的,没有通读,加之英语 ...

  10. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章:创建基本的MVC Web站点

    在这一章中,我们将学习如何使用基架快速搭建和运行一个简单的Microsoft ASP.NET MVC Web站点.在我们马上投入学习和编码之前,我们首先了解一些有关ASP.NET MVC和Entity ...

随机推荐

  1. Vue项目中遇到的问题汇总

    一.打包后的打开index.html页面空白的几种情况: 引入的css.js路径报错,此时解决方法:把vue.config.js中的增加publicPath: ‘./’ 或者把原来的baseUrl改为 ...

  2. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  3. FreeRTOS任务状态信息查询

    uxTaskPriorityGet():查询某个任务的优先级 vTaskPrioritySet():改变某个任务的任务优先级 uxTaskGetSystemState():获取系统中任务状态 vTas ...

  4. python字符串的常见方法

    1.join方法:拼接字符串------->str a = "你是风儿我是沙"b = "@".join(a)print(b)>>>你@是 ...

  5. redhat6.7 yum网络源配置

    RedHat自带的yum源需要当前系统注册了RHN才可以使用,如果没有注册,当使用yum时,会提示需要注册RHN 如果没有注册RHN,则意味着我们不能使用RedHat自带的yum源.这个时候,我们可以 ...

  6. 时间模块time和datetime的使用

    日期和时间 一 time模块 import time 时间的表示形式: 时间戳 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现 ...

  7. vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...

  8. C++(四十四) — 数组模板类(vector工具)

    实现 stl 中的 vector 操作. 1.MyVector.h #pragma once #include <iostream> using namespace std; templa ...

  9. 解决 SSH Connection closed by foreign host 问题

    Xshell 报错 : 1.有可能是IP和别人冲突,改一下IP就好了 2.也有可能是文件权限的问题.改一下: cd /etc/ssh/ chmod ssh_host_* chmod *.pub 3.也 ...

  10. SOA=SOME/IP?你低估了这件事 | 第二弹

    ​        哈喽,大家好,第二弹的时间到~上文书说到v-SOA可以通过SOC.SORS和SOS来分解落地,第一弹中已经聊了SOC的实现,这部分也是国内各大OEM正在经历的阶段,第二弹,我们继续聊 ...