HTML Entity 字符实体(字符转义)
2018-06-24 02:02:47来源:未知 阅读 ()
目录
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为"<",取自"less than"2个单词的首字母。
1.1.2 Entity Number
格式: &#entityNumber;
说明:"&#"开头,";"结尾,以编号的形式描述字符。此编号可以为十进制或十六进制(以"&#x"开头)等数字格式。
1.1.3 示例
<p>字符 :<</p> <p>Entity Name :<</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(十进制) |
|   | |
! | ! | ! |
" | " | " |
# | # | # |
$ | $ | $ |
% | % | % |
& | & | & |
' | ' | ' |
( | ( | ( |
) | ) | ) |
* | * | * |
+ | + | + |
, | , | , |
- | ‐ | - |
. | . | . |
/ | / | / |
: | : | : |
; | ; | ; |
< | < | < |
= | = | = |
> | > | > |
? | ? | ? |
@ | @ | @ |
[ | [ | [ |
\ | \ | \ |
] | ] | ] |
^ | ˆ | ^ |
_ | _ | _ |
` | ` | ` |
{ | { | { |
| | | | | |
} | } | } |
~ | ˜ | ~ |
2.2 字符转换为Entity Name
// ASCII字符集:char 2 entityName var asciiChartSet_c2en = { ' ': ' ', '!': '!', '"': '"', '#': '#', '$': '$', '%': '%', '&': '&', '\'': ''', '(': '(', ')': ')', '*': '*', '+': '+', ',': ',', '-': '‐', '.': '.', '/': '/', ':': ':', ';': ';', '<': '<', '=': '=', '>': '>', '?': '?', '@': '@', '[': '[', '\\': '\', ']': ']', '^': 'ˆ', '_': '_', '`': '`', '{': '{', '|': '|', '}': '}', '~': '˜' } // 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); // => (中文)
2.3 Entity Name转换为字符
// ASCII字符集:entityName 2 char var 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); // => 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 = '(中文)'; var newStr = oldStr.replace(/(&#\d+;)/g, function(matched) { return getCharByEntityNumber(matched); }); console.log(newStr); // => (中文)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:元素垂直居中
下一篇:CSS-笔记1-选择器与文本元素
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash