html实体转换

简介: 摘要:   在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体。如需显示小于号,我们必须这样写:< 或 <   HTML 中的常用字符实体是不间断空格( )。

摘要:

  在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体。如需显示小于号,我们必须这样写:&lt; 或 &#60;

  HTML 中的常用字符实体是不间断空格(&nbsp;)。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

实体列表:

  下面列出了常用的实体对照表

显示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
&cent; &#162;
£ &pound; &#163;
¥ 日圆 &yen; &#165;
欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

实体转换:

  有时候我们需要在js里处理DOM,但是实体只有当浏览器渲染页面时才会转换对应的字符。所以我们就得自己写一个实体转换函数。如下:

function unescapeEntity(str) {
        var reg = /&(?:nbsp|#160|lt|#60|gt|62|amp|#38|quot|#34|cent|#162|pound|#163|yen|#165|euro|#8364|sect|#167|copy|#169|reg|#174|trade|#8482|times|#215|divide|#247);/g,
            entity = {
            '&nbsp;'   : ' ',
            '&#160;'   : ' ',
            '&lt;'     : '<',
            '&#60;'    : '<',
            '&gt;'     : '>',
            '&62;'     : '>',
            '&amp;'    : '&',
            '&#38;'    : '&',
            '&quot;'   : '"',
            '&#34;'    : '"',
            '&cent;'   : '¢',
            '&#162;'   : '¢',
            '&pound;'  : '£',
            '&#163;'   : '£',
            '&yen;'    : '¥',
            '&#165;'   : '¥',
            '&euro;'   : '€',
            '&#8364;'  : '€',
            '&sect;'   : '§',
            '&#167;'   : '§',
            '&copy;'   : '©',
            '&#169;'   : '©',
            '&reg;'    : '®',
            '&#174;'   : '®',
            '&trade;'  : '™',
            '&#8482;'  : '™',
            '&times;'  : '×',
            '&#215;'   : '×',
            '&divide;' : '÷',
            '&#247;'   : '÷'
        };
        if (str === null) {
            return '';
        }
        str = str.toString();
        return str.indexOf(';') < 0 ? str : str.replace(reg, function(chars) {
            return entity[chars];
        });
    }

 

 

小结:

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

 

相关文章
|
1月前
编程笔记 html5&css&js 019 HTML实体
编程笔记 html5&css&js 019 HTML实体
|
10月前
HTML实体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实体</title> </head> <body> <!-- 在网页中多个空格默认情况下会被浏览器解析为一个空格 在HTML中有些时候,我们不能直接书写一些特殊符号 比如多个连续的空格或字母两侧大于小于号 如果需要这些特殊字符,则需要使用HTML中的实体(转义字符)
32 0
|
11月前
|
JavaScript
JS实现HTML实体与字符的相互转换
JS实现HTML实体与字符的相互转换
143 0
|
12月前
|
资源调度
HTML学习笔记(三) 字符实体
HTML学习笔记(三) 字符实体
50 0
|
Web App开发 数据采集 JavaScript
面试官:请用纯 JS 实现,将 HTML 网页转换为图像
在工作时,需要实现一个功能:把一个HTML网页的转换为图像。我想到的第一个想法是使用第三方库,但像dom-to-image或使用Chrome Headless,如Puppeteer。那如何使用纯Javascript解决这种需求呢?
235 0
史上最全HTML实体字符整理
HTML字符实体 做开发的小伙伴们都知道,HTML有一些预留字符,浏览器在解析时不能正确的显示,这个时候我们就需要使用字符实体进行替换。同时,有一些键盘上找不见的符号我们也可使使用字符实体进行替换,下面是我整理的几类我们经常遇到的字符。 1.常见的HTML预留字符 字符 实体编号 实体名称 描述 空格 &nbsp; &#160; &lt; 小于号 &lt; &#60; | 大于号 | &gt; | &gt; & | 和号 | & | & &quot; | 引号 | &quot; | &quot; ’ | 撇号 | &#39; (IE不支持) | &#39; ¢ | 分 | ¢ | ¢ £ |
HTML基础教程5——链接标签和字符实体
跳转超链接时通过<a>标签定义的,链接用于跳转页面或者跳转书签等等,<a href="#">元素</a>标签a中的元素为自定义内容,一般用于提示点击链接着跳转链接后的东西,或者跳转链接的作用之类的。
HTML基础教程5——链接标签和字符实体
|
前端开发 Python
HTML通过Ajax上传图像至Django后端并转换为Mat图像
HTML通过Ajax上传图像至Django后端并转换为Mat图像
Html中的实体字符
Html中的实体字符
61 0