js使用正则(简单介绍)

RegExp 对象

RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法:

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。

返回值

一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 pattern 是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式,或 attributes 含有 "g"、"i" 和 "m" 之外的字符,抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象,但没有省略 attributes 参数,抛出该异常。

修饰符

修饰符     描述

i     执行对大小写不敏感的匹配。

g     执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。

m     执行多行匹配。

方括号

方括号用于查找某个范围内的字符:

表达式     描述

[abc]     查找方括号之间的任何字符。

[^abc]     查找任何不在方括号之间的字符。

[0-9]     查找任何从 0 至 9 的数字。

[a-z]     查找任何从小写 a 到小写 z 的字符。

[A-Z]     查找任何从大写 A 到大写 Z 的字符。

[A-z]     查找任何从大写 A 到小写 z 的字符。

[adgk]     查找给定集合内的任何字符。

[^adgk]     查找给定集合外的任何字符。

(red|blue|green)     查找任何指定的选项。

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符     描述

.     查找单个字符,除了换行和行结束符。

\w     查找单词字符。

\W     查找非单词字符。

\d     查找数字。

\D     查找非数字字符。

\s     查找空白字符。

\S     查找非空白字符。

\b     匹配单词边界。

\B     匹配非单词边界。

\0     查找 NUL 字符。

\n     查找换行符。

\f     查找换页符。

\r     查找回车符。

\t     查找制表符。

\v     查找垂直制表符。

\xxx     查找以八进制数 xxx 规定的字符。

\xdd     查找以十六进制数 dd 规定的字符。

\uxxxx     查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词     描述

n+     匹配任何包含至少一个 n 的字符串。

n*     匹配任何包含零个或多个 n 的字符串。

n?     匹配任何包含零个或一个 n 的字符串。

n{X}     匹配包含 X 个 n 的序列的字符串。

n{X,Y}     匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,}     匹配包含至少 X 个 n 的序列的字符串。

n$     匹配任何结尾为 n 的字符串。

^n     匹配任何开头为 n 的字符串。

?=n     匹配任何其后紧接指定字符串 n 的字符串。

?!n     匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性     描述

global     RegExp 对象是否具有标志 g。

ignoreCase     RegExp 对象是否具有标志 i。

lastIndex     一个整数,标示开始下一次匹配的字符位置。

multiline     RegExp 对象是否具有标志 m。

source     正则表达式的源文本。

RegExp 对象方法

方法     描述

compile     编译正则表达式。

exec     检索字符串中指定的值。返回找到的值,并确定其位置。

test     检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法     描述     FF     IE

search     检索与正则表达式相匹配的值。

match     找到一个或多个正则表达式的匹配。

replace     替换与正则表达式匹配的子串。

split     把字符串分割为字符串数组。

一个简单的例子:关于用户名和邮箱的检测,使用正则。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
	<title></title>
</head>
<body>
	<pre>
		1.用户名只能是字母及数字6-11位
		2.Email为正确的Email
	</pre>
        <h1>检测用户名和Email的正确性</h1>
        <form action="" >
		<p>用户名:<input type="text" name="username" id="" /></p>
		<p>Email:<input type="text" name="email" id="" /></p>
		<p><input type="submit" value="提交" /></p>
	</form>
        <hr>
        <h1>标注有邮箱的人,使其背景色改变</h1>
        <input type="button" value="标注有邮箱的人" onclick="find();">
        <ul>
            <li>张飞</li>
            <li>刘备&lt;[email protected]&gt;</li>
            <li>关羽</li>
            <li>赵云&lt;[email protected]&gt;</li>
       </ul>
</body>
<script type="text/javascript">
	document.getElementsByTagName('form')[0].onsubmit = function(){
		var patt = /^[a-zA-z0-9]{6,11}$/;
		if(!patt.test(document.getElementsByName('username')[0].value)){
			alert('用户名由6-11位字母数字组成');
			return false;
		}
		patt = /^\[email protected]\w+(\.\w+)+$/;
		if(!patt.test(document.getElementsByName('email')[0].value)){
			alert('输入的邮箱格式不正确!');
			return false;
		}
	};
       function find(){
        var lis = document.getElementsByTagName('li');
        var i = 0;
        var patt = /\[email protected]\w+(\.\w+)+/;
        while(i < lis.length){
            if(patt.exec(lis[i].innerHTML)!= null){
                lis[i].style.background = 'blue';
            }
            i++;
        }
     }
</script>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-06 20:07:31

js使用正则(简单介绍)的相关文章

JavaScript(JS)之简单介绍

JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0

js工具库简单介绍

javascript mvc的解决方案: angularjs, backbone,underscore, 有空的时候了解一下. 移动端的几个需要了解一下,jq mobile, zepto.knockout,swipe,iscroll 还有一些剑走偏峰的作品比如:three.js,d3.js,famo.us, 还有一些国内jser的贡献,团队或个人的都有.比如qwrap, avalon,wind,kissy,还有一个百度的七巧板,腾讯的jx, 还有其它的如vue.js, lightbox, art

前端之JavaScript:JS简单介绍

JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0

js的nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:此属性可以返回当前节点的下一个同级节点.如果下一个同级节点不存在,则此属性返回值是null.语法结构: elementNode.nextSibling 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softw

Node.js简单介绍

Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安装用npm命令安装. Node.js简单介绍,布布扣,bubuko.com

js的table表格对象的rows属性用法简单介绍

js的table表格对象的rows属性用法简单介绍:rows作用正如其拼写一样,是用来获取一个行的集合,也就是表格中行的集合.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

JS获取各种宽度、高度的简单介绍:

JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧

Js正则表达式学习之test和compile的简单介绍

RegExp 对象用于规定在文本中检索的内容. 定义 RegExp RegExp 对象用于存储检索模式. 通过 new 关键词来定义 RegExp 对象.以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e": test方法如下 var patt1=new RegExp("e"); RegExp 对象有 3 个方法:test().exec() 以及 compile(). patt1.test("the best things in lif

JS获取各种宽度、高度的简单介绍

JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标

js按钮确认删除提示以及js的三种弹出框简单介绍

js按钮确认删除提示 第一种方法: html代码: 1 <a href="" οnclick="javascript:return del();">删除</a> js代码: 1 function del() { 2 var msg = "您真的确定要删除吗?\n\n请确认!"; 3 if (confirm(msg)==true){ 4 return true; 5 }else{ 6 return false; 7 } 8