阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    html entity

    html entity 介绍

    在编写 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 Entity Name

    格式: &entityName;

    说明:"&“开头,";“结尾,以语义的形式描述字符。

    如字符”<",英文名称为"less than”,Entity Name 为"&lt;",取自"less than"2 个单词的首字母。

    2 Entity Number

    格式: &#entityNumber;

    说明:"&#“开头,";“结尾,以编号的形式描述字符。

    此编号可以为十进制或十六进制(以”&#x"开头)等数字格式。

    3 示例

    <p>字符 :</p>
    <p>Entity Name :&lt;</p>
    <p>Entity Number(十进制) :&#60;</p>
    <p>Entity Number(十六进制) :&#x3c;</p>
    

    字符 :

    Entity Name :<

    Entity Number(十进制) :<

    Entity Number(十六进制) :<

    字符与 Entity Name 的互相转换

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

    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;

    字符转换为 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;',
        '`': '&grave;',
        '{': '&lcub;',
        '|': '&verbar;',
        '}': '&rcub;',
        '~': '&tilde;'
    }
    
    // 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;
    

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

    字符与 Entity Number 的互相转换

    字符转换为 Entity Number

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

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

    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 搜索

    通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

    你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

    注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

    如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录