JS魔法堂:再识ASCII实体、符号实体和字符实体

简介:

一、前言                                         

  相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢。

 

二、初识HTML实体                                                                 

  由于HTML中某些字符是预留的(如>和<等),若要在进行HTML解析出来后能正确显示预留字符,则需要使用字符实体来代替了。

  字符实体有三种表示方式:

// Named character reference(实体名)
// 示例: 
&entity_name;

// Decimal numeric character reference(十进制实体编号)
// 示例:å
&#entity_number;

// Hexademical numeric character reference(十六进制实体编号)
// 示例:水
ntity_number;
按 Ctrl+C 复制代码

  实体名好处是便于记忆,但不一定所有浏览器能识别所有实体名。

  而所有浏览器均能识别所有的实体编号。

  注意:实体名是大小写敏感的哦!

 

三、3种实体类型                                     

  实体分为ASCII实体、字符实体和符号实体。具体请参考HTML ISO-8859-1 参考手册XHTML Character Entity Reference

  对于每个实体的使用请参考@张鑫旭的《web页面相关的一些常见可用字符介绍》,这里就借用一下关于空格符部分的内容。

  &nbsp; ,不是space键产生的空格。宽度受到字体的 影响。代表non-breaking space(不间断空白),严格语义上是使用场景不希望自动换行时使用,但浏览器会合并多个半角空格(\u0020,由space键产生的空格),因此我 们习惯用&nbsp(unicode为\u00A0)来描述多个空格。

  &ensp; ,1/2个中文字符宽度,且宽度不受字体的影响。

  &emsp; ,1个中文字符宽度,且宽度不受字体的影响。

  &thinsp; ,1/15个em宽度的space,在标准的情况下差不多1px,有时候指1/16em,参考http://en.wikipedia.org/wiki/Thin_space

  题外话:全角空格的unicode为\u3000。

  

四、通过outerHTML,innerHTML,innerText,textContent和value操作实体 

  首先我们需要将3种实体类型分成两类,ASCII实体为一类,字符实体和符号实体为一类。

  对于ASCII实体

     1. 非表单元素的outerHTML和innerHTML只能获取实体名或实体编号;

     2. IE/Chrome下非表单元素的innerText可获取对应的字符;

     3. IE9+/FF/Chrome的非表单元素的textContent可获取对应的字符;

     4. textarea的value可获取对应的字符。

  对于字符实体和符号实体

     只能获取对应的字符,无法直接获取实体名和实体编号。

 

五、总结                                  

  若有纰漏请大家指正,谢谢。

目录
相关文章
|
1月前
编程笔记 html5&css&js 019 HTML实体
编程笔记 html5&css&js 019 HTML实体
|
3月前
|
JavaScript 前端开发
js实用好用的一些符号 ,你准没用过
js实用好用的一些符号 ,你准没用过
|
9月前
|
JavaScript 前端开发 索引
javascript截取两个符号之间的字符串(2):lastIndexOf匹配和正则表达式匹配
javascript截取两个符号之间的字符串(2):lastIndexOf匹配和正则表达式匹配
272 0
|
6月前
|
JavaScript 前端开发
JavaScript 语法:运算符号
JavaScript 语法 之 运算符号
33 0
JavaScript 语法:运算符号
|
9月前
|
JavaScript 前端开发
javascript截取两个符号之间的字符串
javascript截取两个符号之间的字符串
51 0
|
9月前
|
JavaScript 前端开发
javascript中 $和#符号的意思
$() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个DOM方法一样,这个方法返回参数传入的id的那个元素。
227 0
|
11月前
|
JavaScript
JS实现HTML实体与字符的相互转换
JS实现HTML实体与字符的相互转换
141 0
|
JavaScript
js数组与字符串的相互转换,排除某个符号或文字
js数组与字符串的相互转换,排除某个符号或文字
127 0
|
JavaScript 前端开发 算法
JavaScript中一些不常见的运算符号(三分钟看完)
JavaScript中一些不常见的运算符号(三分钟看完)
102 0
|
JavaScript
JS中自定义replace可替换特殊符号$等,但无法忽略大小写的函数
//可替换特殊符号$等,但无法忽略大小写的函数 String.prototype.replaceStr = function (s1, s2) { this.str = this; if (s1.
1072 0