博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML Entity 字符实体(字符转义)
阅读量:6971 次
发布时间:2019-06-27

本文共 3851 字,大约阅读时间需要 12 分钟。

目录

1.

2.

3.

 

1. HTML Entity

1.1 介绍

在编写HTML页面时,需要用到"<"、">"、"空格"等符号,直接输入这些符号时,会错误的把它们与标记混在一起,非常不利于编码。

那么就需要把这些字符进行转义,以另一种方式抒写,以相同的形式展现。

在HTML中,这些字符可称为HTML Entity,即HTML 字符实体。一个HTML Entity都含有2种转义格式:Entity Name 和 Entity Number。

可参考MDN关于HTML 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 示例

字符 :<

Entity Name :<

Entity Number(十进制) :<

Entity Number(十六进制) :<

可看到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 与 字符的互相转换只能依靠字符对照表转换。更多字符对照表可参考: 

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 entityNamevar asciiChartSet_c2en = {    ' ': ' ',    '!': '!',    '"': '"',    '#': '#',    '$': '$',    '%': '%',    '&': '&',    '\'': ''',    '(': '(',    ')': ')',    '*': '*',    '+': '+',    ',': ',',    '-': '‐',    '.': '.',    '/': '/',    ':': ':',    ';': ';',    '<': '<',    '=': '=',    '>': '>',    '?': '?',    '@': '@',    '[': '[',    '\\': '\',    ']': ']',    '^': 'ˆ',    '_': '_',    '`': '`',    '{': '{',    '|': '|',    '}': '}',    '~': '˜'}// 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); // => (中文)

 

2.3 Entity Name转换为字符

// ASCII字符集:entityName 2 charvar asciiChartSet_en2c = {    ' ': ' ',    '!': '!',    '"': '"',    '#': '#',    '$': '$',    '%': '%',    '&': '&',    ''': '\'',    '(': '(',    ')': ')',    '*': '*',    '+': '+',    ',': ',',    '‐': '-',    '.': '.',    '/': '/',    ':': ':',    ';': ';',    '<': '<',    '=': '=',    '>': '>',    '?': '?',    '@': '@',    '[': '[',    '\': '\\',    ']': ']',    'ˆ': '^',    '_': '_',    '`': '`',    '{': '{',    '|': '|',    '}': '}',    '˜': '~',}// e.g. Entity Name转换为字符var oldStr = '(中文)';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 = '(中文)';var newStr = oldStr.replace(/(&#\d+;)/g, function(matched) {    return getCharByEntityNumber(matched);});console.log(newStr); // => (中文)

 

转载地址:http://fiasl.baihongyu.com/

你可能感兴趣的文章
基于 Docker 打造前端持续集成开发环境
查看>>
[case1]记一次spring schedule异常
查看>>
五分钟了解微服务
查看>>
Android从零开始(第四篇)网络框架MVP+Retrofit+Rxjava
查看>>
Android逆向从未如此简单
查看>>
从Android Studio 开始的ARCore之旅
查看>>
Android轮播图控件CustomBanner的使用讲解
查看>>
让你在服务器上顺风顺水——linux常用命令
查看>>
[iOS] [OC] NSNotificationCenter 进阶及自定义(附源代码)
查看>>
Python logging 库的『完整教程』
查看>>
springboot -- 2.0版本自定义ReidsCacheManager的改变
查看>>
应用层,了解一下
查看>>
Failed to execute aapt
查看>>
创建个人cocopods集合(仅供参考)
查看>>
OAuth2.0认证授权workflow探究
查看>>
《Android Security Internals》第二章权限翻译
查看>>
笔者介绍
查看>>
spring-cloud Sleuth
查看>>
大数据成神之路
查看>>
重新梳理下js中的深拷贝和浅拷贝
查看>>