阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 字符列表

      CharacterEntity NameEntity 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的教程都有!

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

      目录
      目录