您的足迹:首页 > 我的代码 >&#数字..这叫什么HTML Entity 字符实体(字符转义)

&#数字..这叫什么HTML Entity 字符实体(字符转义)

  1. HTML Entity


  2. 字符与Entity Name的互相转换


  3. 字符与Entity Number的互相转换



     


  4. 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为"&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等是没必要转义的。



     


  5. 字符与Entity Name的互相转换

    Entity Name 与 字符的互相转换只能依靠字符对照表转换。更多字符对照表可参考:https://www.freeformatter.com/html-entities.html&nbsp;



    2.1 ASCII 字符列表:

    Character Entity Name Entity Number(十进制)

      &nbsp; &#32;

    ! &excl; &#33;

    " &quot; &#34;

    &num; &#35;

    $ &dollar; &#36;

    % &percnt; &#37;

    & &amp; &#38;

    ' &apos; &#39;

    ( &lpar; &#40;

    ) &rpar; &#41;

    &ast; &#42;

    + &plus; &#43;

    , &comma; &#44;

    - &hyphen; &#45;

    . &period; &#46;

    / &sol; &#47;

    : &colon; &#58;

    ; &semi; &#59;

    < &lt; &#60;

    = &equals; &#61;

    > &gt; &#62;

    ? &quest; &#63;

    @ &commat; &#64;

    [ &lsqb; &#91;

    \ &bsol; &#92;

    ] &rsqb; &#93;

    ^ &circ; &#94;

    _ &lowbar; &#95;

    ` &grave; &#96;

    { &lcub; &#123;

    | &verbar; &#124;

    } &rcub; &#125;

    ~ &tilde; &#126;

     



    2.2 字符转换为Entity Name 

    // ASCII字符集:char 2 entityName

    var 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;',

        '': '&amp;grave;',<br /> &nbsp; &nbsp; '{': '&amp;lcub;',<br /> &nbsp; &nbsp; '|': '&amp;verbar;',<br /> &nbsp; &nbsp; '}': '&amp;rcub;',<br /> &nbsp; &nbsp; '~': '&amp;tilde;'<br /> }<br /> &nbsp;<br /> // e.g. 字符转换为Entity Name<br /> var oldStr = '(中文)';<br /> var newStr = oldStr.replace(/(\D{1})/g, function(matched) {<br /> &nbsp; &nbsp; var rs = asciiChartSet_c2en[matched];<br /> &nbsp; &nbsp; return rs == undefined ? matched : rs;<br /> });<br /> console.log(newStr); // =&gt; &amp;lpar;中文&amp;rpar;<br /> &nbsp;<br /> <br /> 2.3 Entity Name转换为字符&nbsp;<br /> // ASCII字符集:entityName 2 char<br /> var asciiChartSet_en2c = {<br /> &nbsp; &nbsp; '&amp;nbsp;': ' ',<br /> &nbsp; &nbsp; '&amp;excl;': '!',<br /> &nbsp; &nbsp; '&amp;quot;': '"',<br /> &nbsp; &nbsp; '&amp;num;': '#',<br /> &nbsp; &nbsp; '&amp;dollar;': '$',<br /> &nbsp; &nbsp; '&amp;percnt;': '%',<br /> &nbsp; &nbsp; '&amp;amp;': '&amp;',<br /> &nbsp; &nbsp; '&amp;apos;': '\'',<br /> &nbsp; &nbsp; '&amp;lpar;': '(',<br /> &nbsp; &nbsp; '&amp;rpar;': ')',<br /> &nbsp; &nbsp; '&amp;ast;': '*',<br /> &nbsp; &nbsp; '&amp;plus;': '+',<br /> &nbsp; &nbsp; '&amp;comma;': ',',<br /> &nbsp; &nbsp; '&amp;hyphen;': '-',<br /> &nbsp; &nbsp; '&amp;period;': '.',<br /> &nbsp; &nbsp; '&amp;sol;': '/',<br /> &nbsp; &nbsp; '&amp;colon;': ':',<br /> &nbsp; &nbsp; '&amp;semi;': ';',<br /> &nbsp; &nbsp; '&amp;lt;': '&lt;',<br /> &nbsp; &nbsp; '&amp;equals;': '=',<br /> &nbsp; &nbsp; '&amp;gt;': '&gt;',<br /> &nbsp; &nbsp; '&amp;quest;': '?',<br /> &nbsp; &nbsp; '&amp;commat;': '@',<br /> &nbsp; &nbsp; '&amp;lsqb;': '[',<br /> &nbsp; &nbsp; '&amp;bsol;': '\\',<br /> &nbsp; &nbsp; '&amp;rsqb;': ']',<br /> &nbsp; &nbsp; '&amp;circ;': '^',<br /> &nbsp; &nbsp; '&amp;lowbar;': '_',<br /> &nbsp; &nbsp; '&amp;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); // => (中文)

     


  6. 字符与Entity Number的互相转换

    3.1 字符转换为Entity Number

    String的实例方法 charCodeAt() 可把指定字符转换为编码:



    1

    2

    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); // => (中文)
本博客所有文章如无特别注明均为原创。作者:恶猫复制或转载请以超链接形式注明转自 恶猫的博客
原文地址《&#数字..这叫什么HTML Entity 字符实体(字符转义)

相关推荐

分享本文至:

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)

恶猫的博客 -记录自己日常,代码,美图,电影,音乐,新闻,只是个人博客而已

浙ICP备15011757号-4 网站地图 联系我