HTML Entity character entity (character escape), Entity escape

HTML Entity character entity (character escape), Entity escape
Directory

1. HTML Entity

2. Conversion of characters and Entity Names

3. Mutual conversion between characters and Entity Number

 

1. Introduction to HTML Entity1.1

When writing HTML pages, you need to use symbols such as "<", ">" and "space". When you directly enter these symbols, they are mistakenly mixed with tags, it is not conducive to encoding.

These characters need to be escaped, expressed in another way, and displayed in the same form.

In HTML, these characters can be called HTML Entity, which is an HTML character Entity. An HTML Entity contains two escape formats: Entity Name and Entity Number.

See the MDN explanation of HTML Entity: https://developer.mozilla.org/en-US/docs/Glossary/Entity

 

1.1.1 Entity Name

Format: & EntityName;

Description:"&"Beginning ,";"EndSemantics. For example, the English Name of the character "<" is "less than", and the Entity Name is "& lt;", which is the first letter of the word "less.

 

1.1.2 Entity Number

Format: & # EntityNumber;

Description:"&#"Beginning ,";"EndNo.. This number can be in decimal or hexadecimal format ("& # X.

 

1.1.3 example

<P> character: </p> <p> Entity Name: & lt; </p> <p> Entity Number (decimal): & #60; </p> <p> Entity Number (hexadecimal): & # x3c; </p>

The Entity Name and Entity Number are displayed as "<" characters on the page.

 

1.2 What are the characters of HTML Entity?

Including but not limited to the following Characters: ASCII Characters (visible part), ISO 8859-1 Characters, ISO 8859-1 Symbols, Math Symbols, Greek Letters, and Miscellaneous HTML entities.

In actual encoding, not all characters need to be escaped, such as a-z, A-Z, etc. is not necessary to escape.

 

2. Conversion of characters and Entity Names

The conversion between Entity Name and character only depends on the character comparison table. For more character table reference: https://www.freeformatter.com/html-entities.html

2.1 ASCII character list:

Character	Entity Name	Entity Number (decimal)
	& Nbsp;	& #32;
!	& Excl;	& Amp; #33;
"	& Quot;	& Amp; #34;
#	& Num;	& Amp; #35;
$	& Dollar;	& Amp; #36;
%	& Percnt;	& Amp; #37;
&	& Amp;	& #38;
'	& Apos;	& Amp; #39;
(	& Lpar;	& Amp; #40;
)	& Rpar;	& Amp; #41;
*	& Ast;	& #42;
+	& Plus;	& Amp; #43;
,	& Comma;	& Amp; #44;
-	& Hyphen;	& Amp; #45;
.	& Period;	& Amp; #46;
/	& Sol;	& #47;
:	& Colon;	& Amp; #58;
;	& Semi;	& #59;
<	& Lt;	& #60;
=	& Equals;	& #61;
>	& Gt;	& #62;
?	& Quest;	& Amp; #63;
@	& Commat;	& #64;
[	& Lsqb;	& #91;
\	& Bsol;	& #92;
]	& Rsqb;	& #93;
^	& Amp; circ;	& #94;
_	& Lowbar;	& #95;
`	& Grave;	& #96;
{	& Lcub;	& #123;
|	& Verbar;	& #124;
}	& Rcub;	& #125;
~	& Tilde;	& #126;

 

2.2 characters to Entity Name

// ASCII character set: char 2 entityNamevar 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. convert the character to Entity Namevar oldStr = '(Chinese)'; var newStr = oldStr. replace (/(\ D {1})/g, function (matched) {var rs = asciiChartSet_c2en [matched]; return rs = undefined? Matched: rs;}); console. log (newStr); // => & lpar; Chinese & rpar;

 

2.3 convert Entity Name to character

// ASCII character set: entityName 2 charvar 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 to var oldStr =' & lpar; Chinese & rpar; '; var newStr = oldStr. replace (/(&. ++ ?;) /G, function (matched) {var rs = asciiChartSet_en2c [matched]; return rs = undefined? Matched: rs;}); console. log (newStr); // => (Chinese)

 

3. Mutual conversion between characters and Entity Number 3.1 character conversion to Entity Number

The String instance method charCodeAt () can convert the specified character to the encoding:

var charCode = '('.charCodeAt(0); // => 40var entityNumber = '&#' + charCode + ';' // => (

 

3.2 Entity Number to character

The String static method fromCharCode () can convert the specified encoding to a character, while the Entity Number encoding can be in decimal or hexadecimal format, so the conversion is done separately:

/*** Convert Entity Number to character * @ param {String} entityNumber */var getCharByEntityNumber = function (entityNumber) {var num = entityNumber. replace ('&#',''). replace (';', ''); if (num. indexOf ('x') = 0) {num = Number. parseInt (num, 16); // convert hexadecimal to hexadecimal} else {num = Number. parseInt (num); // 10 hexadecimal} var char = String. fromCharCode (num); return char;} // e. g. var oldStr = '& #40; Chinese & #41;'; var newStr = oldStr. replace (/(& # \ d +;)/g, function (matched) {return getCharByEntityNumber (matched) ;}); console. log (newStr); // => (Chinese)

 

====================================== Series of articles ==============================================

This article: 1.8 HTML Entity character Entity (character escape)

Web development path Series