相关文章推荐
低调的鸵鸟  ·  jsoup 1.18.1 发布,Java ...·  1 月前    · 
憨厚的遥控器  ·  论文分享 | ...·  7 月前    · 
闯红灯的大熊猫  ·  springboot 2.5.8 ...·  1 年前    · 

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;     &excl;     &quot;     &dollar;     &percnt;     &apos;     &lpar;     &rpar;     &plus;     &comma;      &hyphen;      &period;     &colon;     &semi;     &equals;     &quest;     &commat;      &lsqb;      &bsol;      &rsqb;     &circ;     &lowbar;     &grave;     &lcub; &#123;     &verbar; &#124;     &rcub; &#125;     &tilde; &#126; // 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() 可把指定字符转换为编码:

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