HTML Entity character entity (character escape), Entity escape

Source: Internet
Author: User
Tags comparison table

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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.