html实体字符

末蓝、 2022-12-27 14:11 608阅读 0赞

#### HTML字符实体（character entities） ####

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。

*如显示小于号:*

< 
    或 
    <

*  使用实体名而不是数字的好处是，名称易于记忆。
 *  坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

#### 常用字符实体 ####

<table> 
 <thead> 
  <tr> 
   <th>显示结果</th> 
   <th>描述</th> 
   <th>实体名称</th> 
   <th>实体编号</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>空格</td> 
   <td><code>&amp;nbsp;</code></td> 
   <td><code>&amp;#160;</code></td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于号</td> 
   <td><code>&amp;lt;</code></td> 
   <td><code>&amp;#60;</code></td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于号</td> 
   <td><code>&amp;gt;</code></td> 
   <td><code>&amp;#62;</code></td> 
  </tr> 
  <tr> 
   <td>&amp;</td> 
   <td>与号</td> 
   <td><code>&amp;amp;</code></td> 
   <td><code>&amp;#38;</code></td> 
  </tr> 
  <tr> 
   <td>"</td> 
   <td>双引号</td> 
   <td><code>&amp;quot;</code></td> 
   <td><code>&amp;#34;</code></td> 
  </tr> 
  <tr> 
   <td>’</td> 
   <td>单引号</td> 
   <td><code>&amp;apos;</code>（IE不支持）</td> 
   <td><code>&amp;#39;</code></td> 
  </tr> 
  <tr> 
   <td>￠</td> 
   <td>分</td> 
   <td><code>&amp;cent;</code></td> 
   <td><code>&amp;#162;</code></td> 
  </tr> 
  <tr> 
   <td>£</td> 
   <td>镑</td> 
   <td><code>&amp;pound;</code></td> 
   <td><code>&amp;#163;</code></td> 
  </tr> 
  <tr> 
   <td>¥</td> 
   <td>日圆</td> 
   <td><code>&amp;yen;</code></td> 
   <td><code>&amp;#165;</code></td> 
  </tr> 
  <tr> 
   <td>§</td> 
   <td>节</td> 
   <td><code>&amp;sect;</code></td> 
   <td><code>&amp;#167;</code></td> 
  </tr> 
  <tr> 
   <td>©</td> 
   <td>版权</td> 
   <td><code>&amp;copy;</code></td> 
   <td><code>&amp;#169;</code></td> 
  </tr> 
  <tr> 
   <td>®</td> 
   <td>注册商标</td> 
   <td><code>&amp;reg;</code></td> 
   <td><code>&amp;#174;</code></td> 
  </tr> 
  <tr> 
   <td>×</td> 
   <td>乘号</td> 
   <td><code>&amp;times;</code></td> 
   <td><code>&amp;#215;</code></td> 
  </tr> 
  <tr> 
   <td>÷</td> 
   <td>除号</td> 
   <td><code>&amp;divide;</code></td> 
   <td><code>&amp;#247;</code></td> 
  </tr> 
 </tbody> 
</table>

> 更详细的字符实体可以看这里[https://blog.csdn.net/QXXXD/article/details/111043532][https_blog.csdn.net_QXXXD_article_details_111043532]

#### 转义、反转义HTML实体字符 ####

/**
     *  把html转义成HTML实体字符
     * @param str
     * @returns {string}
     * @constructor
     */
    function htmlEncode(str) {
      var s = "";
      if (str.length === 0) {
        return "";
      }
      s = str.replace(/&/g, "&");
      s = s.replace(/</g, "<");
      s = s.replace(/>/g, ">");
      s = s.replace(/ /g, " ");
      s = s.replace(/\'/g, "'");//IE下不支持实体名称
      s = s.replace(/\"/g, """);
      return s;
    }

/**
     *  转义字符还原成html字符
     * @param str
     * @returns {string}
     * @constructor
     */
    function htmlRestore(str) {
      var s = "";
      if (str.length === 0) {
        return "";
      }
      s = str.replace(/&/g, "&");
      s = s.replace(/</g, "<");
      s = s.replace(/>/g, ">");
      s = s.replace(/ /g, " ");
      s = s.replace(/'/g, "\'");
      s = s.replace(/"/g, "\"");
      return s;
    }
    ！

> 结语：最后给大家分享一些关于HTML的面试题，有需要可以[戳我][Link 1]免费领取，先到先得。

![e9c80426d2bd6c732a4a53ff74a52e1a.png][]  
![381fc11eb902926b75c451e2fb1e851b.png][]

[https_blog.csdn.net_QXXXD_article_details_111043532]: https://blog.csdn.net/QXXXD/article/details/111043532
[Link 1]: https://jq.qq.com/?_wv=1027&k=cOLhatFA
[e9c80426d2bd6c732a4a53ff74a52e1a.png]: /images/20221120/3d058330470b47b6a3554f8a09c7e78f.png
[381fc11eb902926b75c451e2fb1e851b.png]: /images/20221120/aae20cd15c044e7c8d24c17466d57c66.png