在編寫HTML頁面時，需要用到"<"、">"、"空格"等符號，直接輸入這些符號時，會錯誤的把它們與標記混在一起，非常不利於編碼。 那麼就需要把這些字元進行轉義，以另一種方式抒寫，以相同的形式展現。 在HTML中，這些字元可稱為HTML Entity，即HTML 字元實體。一個HTML Entity... ...
目錄
1. HTML Entity
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); // => (中文)
==================================系列文章==========================================
本篇文章：1.8 HTML Entity 字元實體(字元轉義)
