### 一,RegExp对象概述
RegExp对象表示正则表达式,RegExp是正则表达式的缩写,它是对字符串执行模式匹配的强大工具。RegExp对象用于规定在文本中检索的内容。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp就是这种模式。简单的模式可以是一个单独的字符;更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等。
正则表达式可以规定字符串中的检索位置,以及要检索的字符类型等。
### 二,创建RexExp对象
创建正则表达式和创建字符串类似,创建正则表达式有两种方式:
(1)使用字面量创建RegExp对象的语法:
/pattern/attributes;
(2)使用new关键词创建RegExp对象的语法:
new RegExp(pattern, attributes);
参数释义:
1,参数pattern是一个字符串,指定了正则表达式的模式或其他正则表达式。
2,参数attributes是一个可选的模式字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、不区分大小写的匹
配和多行匹配。
RegExp对象用于存储检索模式。通过new关键词来创建RegExp对象。以下代创建了名为pattern的 RegExp对象,其模式是 "e",当使用该RegExp对象在一个字符串中检索时,将寻找的是字符 "e"。
~~~
<span style="font-size:18px;">var pattern=new RegExp("e");
var pattern=new RegExp("e",gi);//设置全局搜素不区分大小写</span>
~~~
上述的也可以改成字面量的方式来创建,这种方式也是我们经常使用的方法:
~~~
<span style="font-size:18px;">var pattern=/e/;
var pattern=/e/gi;</span>
~~~
### 三,RegExp对象详细解析
(1)RegExp对象属性
![](https://box.kancloud.cn/2016-04-28_57215590bca72.jpg)
这些基本我们在上述的例子都已经见过,但我们还是举几个简单的例子来看一下:
~~~
<span style="font-size:18px;">var pattern=/e/gim;
document.write(pattern.global+" ");//输出:true。说明设置了全局模式
document.write(pattern.ignoreCase+" ");//输出:true
document.write(pattern.multiline+" ");//输出:true
document.write(pattern.source+" ");//输出:e</span>
~~~
(2)RegExp对象方法
![](https://box.kancloud.cn/2016-04-28_57215590cf473.jpg)
RegExp对象有3个方法:test()、exec()以及compile()。
1)test()方法检索字符串中的指定值,返回值是true或false。
~~~
<span style="font-size:18px;">var pattern=/e/;
var str="The best things in life are free";
document.write(pattern.test(str));//输出:true</span>
~~~
2)exec()方法检索字符串中的指定值,返回值是被找到的值;如果没有发现匹配,则返回null。实例一:
~~~
<span style="font-size:18px;">var pattern=/e/;
var str="The best things in life are free";
document.write(pattern.exec(str));//输出:e</span>
~~~
实例二:
向RegExp对象添加第二个参数,以设定检索。如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数。
在使用 "g" 参数时,exec() 的工作原理如下:
1,找到第一个 "e",并存储其位置。
2,如果再次运行exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置。
~~~
<span style="font-size:18px;">var pattern=/e/g;
var str="The best things in life are free";
do
{
var result=pattern.exec(str);
document.write(result+" ");
}
while(result!=null)</span>
~~~
输出的结果为:e e e e e e null
3)compile()方法用于改变正则表达式,compile()既可以改变检索模式,也可以添加或删除第二个参数。
~~~
<span style="font-size:18px;">var pattern=/e/;
var str="The best things in life are free";
document.write(pattern.test(str));//输出:true
pattern.compile("d");
document.write(pattern.test(str));//输出:false</span>
~~~
(3)支持正则表达式的String对象的方法
![](https://box.kancloud.cn/2016-04-28_57215590de541.jpg)
由于正则表达式和String对象有着一定的联系,因此String对象的一些方法可用于正则表达式:
~~~
<span style="font-size:18px;">var pattern=/e/g;//开启全局模式
var str="The best things in life are free";
document.write(str.match(pattren)+"<br/>");//以数组的形式输出:e,e,e,e,e,e
document.write(str.search(pattren)+"<br/>");//输出:2(返回第一个匹配到的位置)
document.write(str.replace(pattren,"a")+"<br/>");//输出:Tha bast things in lifa ara fraa
var pattern1=/\s/g;//\s表示空格字符
document.write(str.split(pattren1));//输出:The,best,things,in,life,are,free</span>
~~~
(4)元字符是拥有特殊含义的字符:
![](https://box.kancloud.cn/2016-04-28_57215590eefce.jpg)
由于这些使用广泛,我们只是举几个例子:
~~~
<span style="font-size:18px;">var pattern=/b.ue/;//点符号表示匹配除了换行符以外的任意字符。
var str="blue";
document.write(pattern.test(str));//输出:true</span>
~~~
(5)方括号用于查找某个范围的字符:
![](https://box.kancloud.cn/2016-04-28_572155910b65c.jpg)
~~~
<span style="font-size:18px;">var pattern=/[a-z]oogle/;//[a-z]表示26个小写字母,任意一个都可以匹配
var str="woogle";
document.write(pattren.test(str));//输出:true</span>
~~~
(6)量词
![](https://box.kancloud.cn/2016-04-28_572155911e0bc.jpg)
~~~
<span style="font-size:18px;">var pattern=/go+gle/;//o*表示匹配至少一个0
var str="google";
document.write(pattren.test(str));//输出:true</span>
~~~
### 四,常用的正则表达式
主要的是看变量patttern模式字符串表示的正则表达式。其余的是一些JS的基本的东西,可以忽略。
(1)检查邮政编码
~~~
<span style="font-size:18px;">var pattern=/^[0-9]{6}$/;//必须是6位,并且都是是数字
var str=prompt("请输入邮政编码:");
if(pattern.test(str))
{
alert("您输入的是正确的邮政标号!");
}
else
{
alert("您输入的是错误的邮政标号!");
}</span>
~~~
输入一些数据运行的结果为:
输入:056500
![](https://box.kancloud.cn/2016-04-28_572155912ec64.jpg)
![](https://box.kancloud.cn/2016-04-28_572155913f25a.jpg)
输入:123
![](https://box.kancloud.cn/2016-04-28_572155914f814.jpg)
![](https://box.kancloud.cn/2016-04-28_5721559160d3f.jpg)
(2)简单电子邮件地址验证
~~~
<span style="font-size:18px;">var pattern=/^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/;
var str=prompt("请输入邮箱名称:");
if(pattern.test(str))
{
alert("您输入的是正确的邮箱名称!");
}
else
{
alert("您输入的是错误的邮箱名称!");
}</span>
~~~
(3)检查上传文件压缩包
~~~
<span style="font-size:18px;">var pattern=/[\w]+\.zip|rar|gz/;//\w表示所有数字和字母以及下划线
var str=prompt("请输入压缩包的名称:");
if(pattern.test(str))
{
alert("您输入的是正确的压缩包名称!");
}
else
{
alert("您输入的是错误的压缩包名称!");
}</span>
~~~
(4)检查手机号
~~~
<span style="font-size:18px;">var pattern=/^[1][0-9]{10}$/;
var str=prompt("请输入手机号码:");
if(pattern.test(str))
{
alert("您输入的是正确的手机号码!");
}
else
{
alert("您输入的是错误的手机号码!");
}</span>
~~~
下面三个输出的结果就不再一一展示,只要写好模式正则表达式就可以检验输入的数据是否正确。由于刚刚接触正则表达式,可能有不正确的地方,自己会进行完善和修正。
- 前言
- HTML学习1:Dreamweaver8的安装
- HTML学习2:初识HTML
- HTML学习3:常用标签之文本标签
- HTML学习4:常用标签之列表标签
- HTML学习5:常用标签之图像标签
- HTML学习6:常用标签之超链接标签
- HTML学习7:常用标签之表格标签
- HTML学习8:常用标签之框架标签
- HTML学习9:常用标签之表单标签
- HTML学习10:表单格式化
- HTML学习11:HTTP 方法
- HTML学习12:其他常见标签之头标签
- HTML学习13:其他常见标签之体标签
- 轻松学习JavaScript一:为什么学习JavaScript
- 轻松学习JavaScript二:JavaScript语言的基本语法要求
- 轻松学习JavaScript三:JavaScript与HTML的结合
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 轻松学习JavaScript五:JavaScript的变量和数据类型
- 轻松学习JavaScript六:JavaScript的表达式与运算符
- 轻松学习JavaScript七:JavaScript的流程控制语句
- 轻松学习JavaScript八:JavaScript函数
- 轻松学习JavaScript九:JavaScript对象和数组
- 轻松学习JavaScript十:JavaScript的Date对象制作一个简易钟表
- 轻松学习JavaScript十一:JavaScript基本类型(包含类型转换)和引用类型
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)
- 轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)
- 轻松学习JavaScript十四:JavaScript的RegExp对象(正则表达式)
- 轻松学习JavaScript十五:JavaScript之BOM简介
- 轻松学习JavaScript十六:JavaScript的BOM学习(一)
- 轻松学习JavaScript十七:JavaScript的BOM学习(二)
- 轻松学习JavaScript二十九:JavaScript中的this详解
- CSS基础学习一:CSS概述
- CSS基础学习二:如何创建 CSS
- CSS基础学习三:CSS语法
- CSS基础学习四:元素选择器
- CSS基础学习五:类选择器
- CSS基础学习六:id选择器
- CSS基础学习七:属性选择器
- CSS基础学习八:派生选择器
- CSS基础学习九:伪类
- CSS基础学习十:伪元素
- CSS基础学习十一:选择器的优先级
- CSS基础学习十二:CSS样式
- CSS基础学习十三:盒子模型
- CSS基础学习十四:盒子模型补充之display属性设置
- CSS基础学习十五:盒子模型补充之外边距合并
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- CSS基础学习十七:CSS布局之定位
- CSS基础学习十八:CSS布局之浮动
- CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效
- DIV+CSS实操一:经管系网页总体模块布局
- DIV+CSS实操二:经管系网页添加导航栏和友情链接栏
- DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息模块
- DIV+CSS实操四:经管系网页内容模块内容添加(一)
- DIV+CSS实操五:经管系网页内容模块内容添加(二)
- DIV+CSS实操六:经管系网页添加导航栏下拉菜单
- DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- JS中实现字符串和数组的相互转化