JavaScript脚本语言基础（四）

导读：

JavaScript和DOM

DOM文档对象常用方法和属性

DOW文档对象运用

JSON数据交换格式

正则表达式

1、JavaScript和DOM [返回]

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，可以用于任何编程语言。DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，DOM技术使得页面的交互性大大地增强。

DOM文档中的所有节点组成了一个文档树（或节点树）。DOM文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。DOM文档中，每个节点都有一些重要的属性： 最重要的是nodeType,它描述该节点是什么，以及元素（element）、属性（attribute）、注释（comment）、文本（text）或者其他几种类型（共12个）。

在网页设计工程中，JavaScript可以灵活地对HTML元素进行添加、移动、改变或移除的方法和属性，这些都是通过DOM文档对象模型来实现的。

2、DOM文档对象常用方法和属性 [返回]

Document对象

getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点。
createElement(tagName)：创建元素节点。
createTextNode(data)：创建文本节点。
createAttirbute(name)：创建属性节点。

Element对象

getAttribute(name)：获取属性；
setAttribute(name,value)：设置属性；
removeAttribute(name)：删除属性。
className：元素的class名称属性：
style：对象只代表内联样式的集合，即由HTML标签中的style属性设置的样式；
innerHTML：该属性可设置元素内HTML文本串，HTML代码会被执行（该属性非w3c标准）；
innerText：该属性可设置元素内的纯文本，即使文本包含有html代码也不会被浏览器执行，而是当作纯文本（非w3c标准）；
outerHTML：设置元素内的HTML文本串，元素本身也包括在内（非w3c标准）；
outerText：设置元素内的纯文本，即使文本包含有html代码也不会被浏览器执行，而是当作纯文本.元素本身也包括在内（非w3c标准）；
offsetParent：返回对最近的具有相对或绝对定位的父元素的引用。该属性不是w3c标准，但得到了很好的支持。

Node对象

childNodes：返回的是一个NodeList对象，也可以看成是一个数组，它表示调用该属性的节点对象下的所有子节点，可以用childNodes[]来引用数组中单独的元素；
childNodes.length：该属性返回childNodes中节点、文本和属性数；
children.length：该属性返回childNodes中节点数；
parentNode：返回节点的父节点；
nodeType：返回节点的节点类型，IE只支持数字值，FF还支持常量值。1：ELEMENT节点，2：ATTRIBUTE节点，3：TEXT节点，9：DOCUMENT节点；
nodeName：返回节点的名称，即标签名称；
firstChild：返回第一个子节点；
lastChild：返回最后一个子节点；
previousSibling：返回调用该属性的节点的前一个兄弟节点，没有则返回null；
nextSibling：返回调用该属性的节点的后一个兄弟节点，没有则返回null；
appendChild()：向调用该方法的节点的子节点列表末尾添加节点。注意其参数是一个节点，而不是一个标签。该方法返回的是这个新添加进去的节点,要注意的是，如果要添加的节点已经是文档的一部分的话，那么首先会删除文档原先存在的节点；
cloneNode()：拷贝节点。当里面参数为true时，那么节点的所有子节点也会被克隆。该方法返回拷贝的节点；
removeChild()：从子节点列表中删除指定的节点，参数是要删除的节点。成功则返回被删除的节点，失败则返回null；
replaceChild(a,b)：将某个子节点替换为另一个,成功则返回被替换的节点，失败则返回null。第一个参数为用来替换的新节点，第二个参数为将要被替换的节点；
insertBefore(a,b)：在某个子节点前插入新的子节点，并返回新的子节点。第一个参数为要插入的新的子节点，第二个参数指定要在哪个子节点前插入新节点。

注：在不同教程和参考书中，HTML文档中的div、table等被称为标签、元素和节点...

3、DOW文档对象运用 [返回]

（1）JavaScript通过DOM操作HTML文档基础

用法如下：

#Code 401：引用和操作HTML文档中已有标签案例

银河网络统计学教程

引用和操作HTML文档中的div标签练习

1、通过id添加HTML文档片段或文本字符（运行）

2、向文档中添加或插入新标签（运行）

3、向标签添加样式（运行）

4、移除文档中已有标签（运行）

运行代码

（2）JavaScript通过DOM操作表单

在HTML文档中，表单标签form及其常用组件用于接收用户指令。语法格式如下：

<form>
  <input id="myText" type="text" name="name" value=""/>文本输入框（text）<p/>
  <input id="myRadio" type="radio" name="name" value="" checked/>单选框1（radio）
  <input id="myRadio" type="radio" name="name" value=""/>单选框2（radio）
  <input id="myRadio" type="radio" name="name" value=""/>单选框3（radio）<p/>
  <input id="myCheckbox1" type="checkbox" name="name" value="" checked/>复选框1（checkbox）
  <input id="myCheckbox2" type="checkbox" name="name" value="" checked/>复选框2（checkbox）
  <input id="myCheckbox3" type="checkbox" name="name" value=""/>复选框3（checkbox）
  <input id="myCheckbox4" type="checkbox" name="name" value=""/>复选框4（checkbox）<p/>
  <input type="reset" name="name" value="reset"/>重置按钮（reset）<p/>
  <select id="mySelect" >
   <option value="value1">option 选择项1（option）</option>
   <option value="value2">option 选择项2（option）</option>
   <option value="value3">option 选择项3（option）</option>
    <option value="value4">option 选择项4（option）</option>
   <option value="value5">option 选择项5（option）</option>
   <option value="value6">option 选择项6（option）</option>
 </select><p/>
  <textarea id="myTextarea" style="width:300px; height:100px;">textarea 多行文本输入区（textarea）</textarea><p/>
</form>

在网页中显示如下：

文本输入框（text）

单选框1（radio）
单选框2（radio）
单选框3（radio）

复选框1（checkbox）
复选框2（checkbox）
复选框3（checkbox）
复选框4（checkbox）

重置按钮（reset）

option 选择项1（option）
option 选择项2（option）
option 选择项3（option）
option 选择项4（option）
option 选择项5（option）
option 选择项6（option）

textarea 多行文本输入区（textarea）

JavaScript通过DOM操作表单案例如下：

#Code 402：JavaScript通过DOM操作表单案例

银河网络统计学教程

JavaScript通过DOM操作表单

文本输入框（text）

单选框1（radio）
单选框2（radio）
单选框3（radio）

复选框1（checkbox）
复选框2（checkbox）
复选框3（checkbox）
复选框4（checkbox）

重置按钮（reset）

选择项 
option 选择项1（option）
option 选择项2（option）
option 选择项3（option）
option 选择项4（option）
option 选择项5（option）
option 选择项6（option）

﹤textarea id="myTextarea" style="width:300px; height:100px;"﹥textarea 多行文本输入框（textarea）﹤/textarea﹥

1、文本输入框赋值和设计样式（运行）

2、点击单选框框2或3，“运行”观察效果（运行）

3、选择多选框框3或4，“运行”观察效果（运行）

4、重置按钮可以恢复页面表单缺省值设置，可先填写或选择表单选项，按重置按钮观察效果。

5、点击下拉箭头任选一项，“运行”观察效果（运行）

6、多行文本输入框赋值和设计样式（运行）

注：代码中多行文本输入框﹤textarea﹥﹤/textarea﹥的﹤和﹥是中文全角符号，复制使用时应改为英文半角符号（由于兼顾浏览器显示代码）

运行代码

4、JSON数据交换格式 [返回]

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。

在JSON出现之前，一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，使得开发人员对XML敬而远之，即使你努力钻研几个月，也未必搞得清楚那些复杂的XML规范。

终于，在2002年道格拉斯·克罗克福特（Douglas Crockford）发明了JSON这种超轻量级的数据交换格式。道格拉斯长期担任雅虎的高级架构师，钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：

number：和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：就是JavaScript的null；
array：就是JavaScript的Array表示方式[]；
object：就是JavaScript对象的{}的表示方式。

JSON是一种轻量级的数据交换格式，JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。从结构上看，所有的数据（data）最终都可以分解成三种类型：

第一种类型是标量（scalar）:也就是一个单独的字符串（string）或数字（numbers），比如"北京"这个单独的词。
第二种类型是序列（sequence）:也就是若干个相关的数据按照一定顺序并列在一起，又叫做数组（array）或列表（List），比如"北京，上海"。
第三种类型是映射（mapping）:也就是一个名/值对（Name/value），即数据有一个名称，还有一个与之相对应的值，这又称作散列（hash）或字典（dictionary），比如"首都：北京"。

Json的规则非常简单，只用几十个字就能说清楚，而且Douglas Crockford声称这个规格永远不必升级，因为该规定的都规定了。

并列的数据之间用逗号（", "）分隔；
映射用冒号（": "）表示；
并列数据的集合（数组）用方括号("[]")表示；
映射的集合（对象）用大括号（"{}"）表示。

数据构成的最小单位原来如此简单！所有的数据（包括统计数据）只要“[]”、“{}”、“，”、“：”四个符号（按计算机软件编程规则，数据中的字符要有单引号‘’或“”双引号括起来，这是通则）就可以标记清楚。在编程语言中，只要有了数组（array）和对象（object）就能够储存和处理一切数据了。

JSON已经成为最流行的通用数据处理和交换格式，它是JavaScript的一个子集，和JavaScript有着天然的血脉关系。JavaScript处理JSON数据可谓得心应手。JSON数据强大、简洁的数据表达功能用于处理统计简直就是“量身打造”。在后面的网络统计学算法中，JavaScript和JSON技术扮演着重要角色！

（1）JSON文档案例

比如，下面这句话：

"北京市的面积为16800平方公里，常住人口1600万人。上海市的面积为6400平方公里，常住人口1800万。"写成json格式就是这样：

[
  {"城市":"北京","面积":16800,"人口":1600},
　{"城市":"上海","面积":6400,"人口":1800}
]

注：JSON Code 1：数组对象

如果事先知道数据的结构，上面的写法还可以进一步简化：

[
　["北京",16800,1600],
　["上海",6400,1800]
]

注：JSON Code 2：二维数组

现有三个表格如下：

表1：一班

姓名	民族	籍贯
张三	汉族	长春
李四	回族	大连
王五	汉族	哈尔滨

表2：二班

姓名	民族	籍贯
李伟民	汉族	沈阳
张群	汉族	济南
王晓芳	回族	西宁
牟玉兰	汉族	兰州

表3：三班

姓名	民族	籍贯
伍晓光	汉族	北京
杨帆	汉族	广州

表中数据可用JSON表达为：

{
  "classA":[
    {"name":"张三","nationality":"汉族","nativeplace":"长春"},
    {"name":"李四","nationality":"回族","nativeplace":"大连"},
    {"name":"王五","nationality":"汉族","nativeplace":"哈尔滨"}
　],
  "classB":[
    {"name":"李伟民","nationality":"汉族","nativeplace":"沈阳"},
    {"name":"张群","nationality":"汉族","nativeplace":"济南"},
    {"name":"王晓芳","nationality":"回族","nativeplace":"西宁"},
    {"name":"牟玉兰","nationality":"汉族","nativeplace":"西宁"}
　],
  "classC":[
    {"name":"伍晓光","nationality":"汉族","nativeplace":"北京"},
    {"name":"杨帆","nationality":"汉族","nativeplace":"广州"}
　]
}

注：JSON Code 3：对象数组对象

前面三个表格的数据也可以表示为：

[
    {"name":"张三","nationality":"汉族","nativeplace":"长春","class":"一班"},
    {"name":"李四","nationality":"回族","nativeplace":"大连","class":"一班"},
    {"name":"王五","nationality":"汉族","nativeplace":"哈尔滨","class":"一班"},
    {"name":"李伟民","nationality":"汉族","nativeplace":"沈阳","class":"二班"},
    {"name":"张群","nationality":"汉族","nativeplace":"济南","class":"二班"},
    {"name":"王晓芳","nationality":"回族","nativeplace":"西宁","class":"二班"},
    {"name":"牟玉兰","nationality":"汉族","nativeplace":"西宁","class":"二班"},
    {"name":"伍晓光","nationality":"汉族","nativeplace":"北京","class":"三班"},
    {"name":"杨帆","nationality":"汉族","nativeplace":"广州","class":"三班"}
]

注：JSON Code 4：数组对象

还可进一步简化表示为：

[
    ["张三","汉族","长春","一班"],
    ["李四","回族","大连","一班"],
    ["王五","汉族","哈尔滨","一班"],
    ["李伟民","汉族","沈阳","二班"],
    ["张群","汉族","济南","二班"],
    ["王晓芳","回族","西宁","二班"],
    ["牟玉兰","汉族","西宁","二班"],
    ["伍晓光","汉族","北京","三班"],
    ["杨帆","汉族","广州","三班"]
]

注：JSON Code 5：二维数组

一般情况下，在约定好数据格式前提条件下，JSON二维数组为最简单数据格式，特别是进行纯数值统计计算过程中，二维数组处理多元统计数据非常方便。

更多有关统计数据格式方面的知识参考:

http://www.galaxystatistics.com/webTJX/mobile/tjxData.html。

（2）JavaScript处理JSON数据

JavaScript操作JSON数据案例如下：

#Code 403：JavaScript操作JSON数据案例

JavaScript脚本代码练习

数据:

---

oJSONCode1 =
  [
    {"城市":"北京","面积":16800,"人口":1600},
　  {"城市":"上海","面积":6400,"人口":1800}
  ]

oJSONCode2 =

[

　["北京",16800,1600],

　["上海",6400,1800]

]

oJSONCode3 =

{

"classA":[

{"name":"张三","nationality":"汉族","nativeplace":"长春"},

{"name":"李四","nationality":"回族","nativeplace":"大连"},

{"name":"王五","nationality":"汉族","nativeplace":"哈尔滨"}

　],

"classB":[

{"name":"李伟民","nationality":"汉族","nativeplace":"沈阳"},

{"name":"张群","nationality":"汉族","nativeplace":"济南"},

{"name":"王晓芳","nationality":"回族","nativeplace":"西宁"},

{"name":"牟玉兰","nationality":"汉族","nativeplace":"西宁"}

　],

"classC":[

{"name":"伍晓光","nationality":"汉族","nativeplace":"北京"},

{"name":"杨帆","nationality":"汉族","nativeplace":"广州"}

　]

}

功能:数组和对象形式JSON数据浏览、修改、添加和删除练习

---

1、JSON数据（oJSONCode1、oJSONCode2）访问和输出（运行）

2、JSON数据（oJSONCode1、oJSONCode2）添加、修改（运行）

3、JSON数据（oJSONCode1）删除（运行）

4、JSON数据（oJSONCode3）访问和输出（运行）

5、JSON数据（oJSONCode3）添加、修改（运行）

6、JSON数据（oJSONCode3）删除（最后运行）（运行）

效果:

---

运行代码

5、正则表达式 [返回]

正则表达式，又称规则表达式（Regular Expression，在代码中常简写为regexp）。在计算机软件中，正则表通常被用来检索、替换那些符合某个模式(规则)的文本。

许多程序设计语言都支持利用正则表达式进行字符串操作，JavaScript也不例外。

（1）正则表达式的语法规则

行定位符（^和$）：“^”表示行的开始；“$”表示行的结尾；

单词定界符\b和\B）：“\b”表示要查找的字串为一个完整的单词；“\B”匹配的字串不能是一个完整的单词，而是其他单词或字串的一部分；

字符类（[]）：正则表达式是区分大小写的，如果要忽略大小写可使用方括号表达式“[]”。只要匹配的字符出现在方括号内，即可表示匹配成功。但要注意，一个方括号只能匹配一个字符。例如，要匹配的字串tm不区分大小写，那么该表达式应该写作如下格式，[Tt][Mm]；

选择字符（|）：选择字符可以理解为“或”，可以匹配任意长度的字串，如，TM|tm|Tm|tM；

连字符（-）：连字符可以表示字符的范围。如[a-zA-Z]；

排除字符（[^]）：匹配不符合命名规则的变量。这个元字符在前面出现过，表示行的开始。而这里将会放到方括号中，表示排除的意思。例如：[^a-zA-Z]，该表达式匹配的就是不以字母和下划线开头的变量名；

限定符（? * + {n} {n,} {n,m}）：限定符用来实现匹配重复出现的字母或字串。限定符主要有6种，
    ？：匹配前面的字符零次或一次；
    +：匹配前面的字符一次或多次；
    *：匹配前面的字符零次或多次；
    {n}：匹配前面的字符n次；
    {n,}：匹配前面的字符最少n次；
    {n,m}：匹配前面的字符最少n次、最大m次；

点号字符（.）：匹配换行符外的任意一个字符。如匹配以s开头、t结尾、中间包含一个字母的单词。格式为， ^s.t$，匹配的单词包括sat、set、sit等。再如，匹配一个单词，它的第一个字母为r，第3个字母为s，最后一个字母为t。能匹配该单词的正则表达式为^r.s.*t$；

转义字符（\）：匹配特殊字符（如“.”、“?”、“\”等）变为普通的字符。IP地址的实例，用正则表达式匹配诸如127.0.0.1这样格式的IP地址，格式为： [0-9]{1,3}(\.[0-9]{1,3}){3}。在使用“.”时，需要使用转义字符（\）；

反斜线（\）：除了可以做转义字符外，反斜线还有其他一些功能。反斜线可以将一些不可打印的字符显示出来，如表所示,
    \f：换页符；
    \n：换行符；
    \r：回车符；
    \xhh：十六进制代码
    \ddd：八进制代码
    \d：数字：[0-9]\D 非数字，[^0-9]
    \s：空白字符：[\t\n\x0B\f\r]
    \S：非空白字符：[^\s]
    \w：单词字符：[a-zA-Z_0-9]
    \W 非单词字符：[^\w]

括号字符（()）：小括号字符的第一个作用就是可以改变限定符的作用范围，如“|”、“*”、“^”等。如(thir|four)th，这个表达式的意思是匹配单词thirth或fourth，如果不使用小括号，那么就变成了匹配单词thir和fourth了；小括号的第二个作用是分组，也就是子表达式。如(\.[0-9]{1,3}){3}，就是对分组(\.[0-9]{1,3})进行重复操作。

（2）常用正则表达式

正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。

正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：

var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/;
var r = fieldValue.match(reg);
if(r==null)
alert('Date format error!');

下面是前端开发中经常使用到的正则表达式。

1）校验密码强度

密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。

^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

2）校验中文

字符串仅能是中文。

^[\\u4e00-\\u9fa5]{0,}$

3） 由数字、26个英文字母或下划线组成的字符串

^\\w+$

4） 校验E-Mail 地址

同密码一样，下面是E-mail地址合规性的正则检查语句。

[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?

5） 校验身份证号码

下面是身份证号码的正则校验。15 或 18位。

15位：

^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$

18位：

^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$

6） 校验日期

“yyyy-mm-dd“ 格式的日期校验，已考虑平闰年。

^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$

7） 校验金额

金额校验，精确到2位小数。

^[0-9]+(.[0-9]{2})?$

8） 校验手机号

下面是国内 13、15、18开头的手机号正则表达式。

^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$

9） 判断IE的版本

^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$

1. 检查URL的前缀

应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

if (!s.match(/^[a-zA-Z]+:\\/\\//)) {s = 'http://' + s;}

1. 提取URL链接

下面的这个表达式可以筛选出一段文本中的URL。

^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?

1. 文件路径及扩展名校验

验证文件路径和扩展名

^([a-zA-Z]\\:|\\\\)\\\\([^\\\\]+\\\\)*[^\\/:*?"<>|]+\\.txt(l)?$

1. 提取Color Hex Codes

有时需要抽取网页中的颜色代码，可以使用下面的表达式。

\\#([a-fA-F]|[0-9]){3,6}

1. 提取网页图片

假若你想提取网页中所有图片信息，可以利用下面的表达式。

\\< *[img][^\\>]*[src] *= *[\\"\\']{0,1}([^\\"\\'\\ >]*)

1. 提取页面超链接

提取html中的超链接。

(<a\\s*(?!.*\\brel=)[^>]*)(href="https?://)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)></a\\s*(?!.*\\brel=)[^>

1. 精炼CSS

通过下面的表达式，可以搜索相同属性值的CSS，从而达到精炼代码的目的。

^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}

1. 抽取注释

如果你需要移除HMTL中的注释，可以使用如下的表达式。

<!--(.*?)-->

1. 匹配HTML标签

通过下面的表达式可以匹配出HTML中的标签。

\\s]+))?)+\\s*|\\s*)/?>

（3）JavaScript中常用正则表达式方法

JavaScript运用正则表达式时常用test、exec、match、search、replace、split六种方法。

1）test方法：检查指定的字符串是否存在

var str = "123123";
var reg = /123/gi;
reg = reg.test(str);  //返回true

2）exec方法：返回查询值

var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reg = /cat/i;
reg = reg.exec(data);  //返回Cat

3）match方法：获得查询数组

var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reg = /cat/gi;
reg = data.match(reg);

4）search方法：返回搜索位置，类似于indexof方法

var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reg = /cat/gi;
reg = data.search(reg);  //返回23

5）replace方法：利用正则替换字符

var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reg = /cat/gi;
reg = data.replace(reg,"libinqq");

6）split方法：利用正则分割数组

var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reg = /\,/;
reg = data.split(reg);

（4）JavaScript中运用正则表达式

JS定义正则表达式有两种形式，一种是普通方式，一种是构造函数方式。

普通方式：
    var reg=/表达式/附加参数
    表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符，来代表特殊的规则
    附加参数：用来扩展表达式的含义，主要有三个参数，
        g：代表可以进行全局匹配
        i：代表不区分大小写匹配
        m：代表可以进行多行匹配
构造函数方式：
    var reg=new RegExp(“表达式”,”附加参数”)
    表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符，来代表特殊的规则
    附加参数：用来扩展表达式的含义

普通方式例子，

var reg=/a*b/;

var reg=/abc+f/g;

构造函数方式例子，

var reg=new RegExp(“a*b”);

var reg=new RegExp(“abc+f”,”g”);

普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个js变量，例如根据用户的输入来作为表达式参数等等：

var reg=new RegExp(document.getElementById('myDate').value,”g”);

JavaScript正则表达式代码框



代码运行结果


运行代码

注：可以复制、粘贴实例代码到JavaScript正则表达式代码框（Ctrl+C：复制；Ctrl+V：粘贴）

例1：将文本中所有回车换行替换为符号“|”，再把空格替换为标点符号“,”。

var oStr="901231 113.10 114.70 114.80 112.85 30340\n910131 115.00 118.80 118.90 114.80 35690\n910228 119.00 122.60 122.80 118.90 21850";
oStr = oStr.replace(/[\r\n]/g,"|");
var reg = oStr.replace(/\s+/g, ",");

正则表达式练习：

整数或者小数：^[0-9]+\.{0,1}[0-9]{0,2}$
只能输入数字："^[0-9]*$"。
只能输入n位的数字："^\d{n}$"。
只能输入至少n位的数字："^\d{n,}$"。
只能输入m~n位的数字：。"^\d{m,n}$"
只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。
只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。
只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。
只能输入非零的正整数："^\+?[1-9][0-9]*$"。
只能输入非零的负整数："^\-[1-9][]0-9"*$。
只能输入长度为3的字符："^.{3}$"。
只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。
只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。
只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。
只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。
只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。
验证是否含有^%&',;=?$\"等字符："[^%&',;=?$\x22]+"。
只能输入汉字："^[\u4e00-\u9fa5]{0,}$"
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
匹配空行的正则表达式：\n[\s| ]*\r
匹配html标签的正则表达式：<(.*)>(.*)<\/(.*)>|<(.*)\/>
匹配首尾空格的正则表达式：(^\s*)|(\s*$)

例2：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

var str="I am 张三";
var reg=str.replace(/[^\x00-\xff]/g,"aa").length; //返回9

例3：去除字符串首尾空格

var str=" I am 张三 ";
var reg=str.replace(/(^\s*)|(\s*$)/g,"");

例4：将字符串中的数字换成符号“#”

var str="we7e8r9e8f9f8d7f8";
var reg=str.replace(/[0-9]/g,"#");

例5：提取唯一字母和数字，并统计出重复次数

var str = "we7e8r9e8f9f8sddsfdfd4576hghg8gf9ggh8h876543dfgdfg9d7f8";
var str1 = str.split('').sort().join('').replace(/(.)\1+/g,'$1');
var oLen = str1.length;
var zz;
var oTxt="";
var oZF
for (var i=1; i<oLen; i++) {
  oZF = str1.substring(i,i+1);
  zz="/"+oZF+"/g";
  zz = eval(zz);
  oTxt+=oZF+":"+str.match(zz).length+"|";
  }
reg = oTxt;

posted @
2016-10-31 05:35 
银河统计 
阅读(...) 
评论(...) 
编辑 
收藏