js的RegExp

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。

所以我们判断一个字符串是否是合法的Email的方法是:

  1. 创建一个匹配Email的正则表达式;
  2. 用该正则表达式去匹配用户的输入来判断是否合法。

在正则表达式中,如果直接给出字符,就是精确匹配。用\d可以匹配一个数字,\w可以匹配一个字母或数字,所以:

  • ‘00\d‘可以匹配‘007‘,但无法匹配‘00A‘
  • ‘\d\d\d‘可以匹配‘010‘
  • ‘\w\w‘可以匹配‘js‘

.可以匹配任意字符,所以:

  • ‘js.‘可以匹配‘jsp‘‘jss‘‘js!‘等等。

要匹配变长的字符,在正则表达式中,用*表示任意个字符(包括0个),用+表示至少一个字符,用?表示0个或1个字符,用{n}表示n个字符,用{n,m}表示n-m个字符:

来看一个复杂的例子:\d{3}\s+\d{3,8}

我们来从左到右解读一下:

  1. \d{3}表示匹配3个数字,例如‘010‘
  2. \s可以匹配一个空格(也包括Tab等空白符),所以\s+表示至少有一个空格,例如匹配‘ ‘‘\t\t‘等;
  3. \d{3,8}表示3-8个数字,例如‘1234567‘

综合起来,上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。

如果要匹配‘010-12345‘这样的号码呢?由于‘-‘是特殊字符,在正则表达式中,要用‘\‘转义,所以,上面的正则是\d{3}\-\d{3,8}

但是,仍然无法匹配‘010 - 12345‘,因为带有空格。所以我们需要更复杂的匹配方式。

进阶

要做更精确地匹配,可以用[]表示范围,比如:

  • [0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线;
  • [0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串,比如‘a100‘‘0_Z‘‘js2015‘等等;
  • [a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下划线、$开头,后接任意个由一个数字、字母或者下划线、$组成的字符串,也就是JavaScript允许的变量名;
  • [a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符(前面1个字符+后面最多19个字符)。

A|B可以匹配A或B,所以(J|j)ava(S|s)cript可以匹配‘JavaScript‘‘Javascript‘‘javaScript‘或者‘javascript‘

^表示行的开头,^\d表示必须以数字开头。

$表示行的结束,\d$表示必须以数字结束。

你可能注意到了,js也可以匹配‘jsp‘,但是加上^js$就变成了整行匹配,就只能匹配‘js‘了。

RegExp

有了准备知识,我们就可以在JavaScript中使用正则表达式了。

JavaScript有两种方式创建一个正则表达式:

第一种方式是直接通过/正则表达式/写出来,第二种方式是通过new RegExp(‘正则表达式‘)创建一个RegExp对象。

两种写法是一样的:

var re1 = /ABC\-001/;
var re2 = new RegExp(‘ABC\\-001‘);

re1; // /ABC\-001/
re2; // /ABC\-001/注意,如果使用第二种写法,因为字符串的转义问题,字符串的两个\\实际上是一个\

先看看如何判断正则表达式是否匹配:

var re = /^\d{3}\-\d{3,8}$/;
re.test(‘010-12345‘); // true
re.test(‘010-1234x‘); // false
re.test(‘010 12345‘); // false

切分字符串

用正则表达式切分字符串比用固定的字符更灵活,请看正常的切分代码:

‘a b   c‘.split(‘ ‘); // [‘a‘, ‘b‘, ‘‘, ‘‘, ‘c‘]

嗯,无法识别连续的空格,用正则表达式试试:

‘a b   c‘.split(/\s+/); // [‘a‘, ‘b‘, ‘c‘]

无论多少个空格都可以正常分割。加入,试试:

‘a,b, c  d‘.split(/[\s\,]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]

再加入;试试:

‘a,b;; c  d‘.split(/[\s\,\;]+/); // [‘a‘, ‘b‘, ‘c‘, ‘d‘]

分组

正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组(Group)。比如:

^(\d{3})-(\d{3,8})$分别定义了两个组,可以直接从匹配的字符串中提取出区号和本地号码:

var re = /^(\d{3})-(\d{3,8})$/;
re.exec(‘010-12345‘); // [‘010-12345‘, ‘010‘, ‘12345‘]
re.exec(‘010 12345‘); // null

如果正则表达式中定义了组,就可以在RegExp对象上用exec()方法提取出子串来。

exec()方法在匹配成功后,会返回一个Array,第一个元素是正则表达式匹配到的整个字符串,后面的字符串表示匹配成功的子串。

exec()方法在匹配失败时返回null

贪婪匹配

var re = /^(\d+)(0*)$/;
re.exec(‘102300‘); // [‘102300‘, ‘102300‘, ‘‘]

由于\d+采用贪婪匹配,直接把后面的0全部匹配了,结果0*只能匹配空字符串了。

必须让\d+采用非贪婪匹配(也就是尽可能少匹配),才能把后面的0匹配出来,加个?就可以让\d+采用非贪婪匹配:

var re = /^(\d+?)(0*)$/;
re.exec(‘102300‘); // [‘102300‘, ‘1023‘, ‘00‘]
 
时间: 2024-11-07 23:49:49

js的RegExp的相关文章

JS基础--RegExp

一.RegExp类型 1.字面量法 var expression=/ pattern /flags; 其中模式(pattern)部分可以是任何简单或者复杂的正则表达式,每个正则表达式都可带有一个或多个标志(flags) g:表示全局(global)模式,将应用与所有字符串. i:表示不区分大小写(case-insensitive)模式,匹配字符串时忽略大小写. m:表示多行(multiline)模式,到达一行文本末时还会继续查找下一行中是否存在与模式匹配的项. /* *匹配字符串中所有“at”的

js中RegExp类型

ECMAScript通过RegExp类型来支持正则表达式. var expression = / pattern / flag ; pattern可以是任意的正则表达式.每个正则都带有标志,用以正则表达式的行为.正则的匹配模式支持三个标志: g:表示全局(global)模式,即模式被应用于所有字符串,而非在发现第一个匹配是立即停止: i:表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写: m:表示多行(multiline)模式,即在到达一行文本末

js中RegExp对象01

一:定义方式 ①字面量方式    var pattern = /pattern/attributes ②构造函数方式  var pattern = new RegExp("pattern","attributes"); attributes参数:可以取值 g (global:是否全局)  ;  i (ignoreCase:是否忽略大小写)  ;  m(multiline:是否多行) 如果前边的"pattern"是一个RegExp对象,则必须删除该

JS之RegExp对象(一)

JavaScript提供了一个RegExp对象来完毕有关正則表達式的操作和功能,每一条正則表達式模式相应一个RegExp实例.有两种方式能够创建RegExp对象的实例.      使用RegExp的显式构造函数,语法为:new RegExp("pattern"[,"flags"]).      使用RegExp的隐式构造函数,採用纯文本格式:/pattern/[flags]. pattern部分为要使用的正則表達式模式文本,是必须的.在第一种方式中,pattern部

Js菜鸟学习

(一) 1 代码如下: //页面中写入html内容 document.write("<h1>Hello World!</h1>") 2 代码如下: //为了防止不支持 JavaScript 的浏览器把js当作为页面的内容来显示 //注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 JavaScript 编译器对这一行的编译. <script type="text/javascript"> <!-- doc

[分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localstore,demo见http://xueduany.github.io/localstore/,下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage

JS基础----&gt;javascript的基础(一)

记录一些javascript的基础知识.只是一起走过一段路而已,何必把怀念弄的比经过还长. javascript的基础 一.在检测一个引用类型值和 Object 构造函数时, instanceof 操作符始终会返回 true . var str1 = "huhx"; var str2 = new String("huhx"); console.log(str1 instanceof Object); // false console.log(str2 instanc

JS replace()方法替换变量(可以对变量进行全文替换)

JS replace()方法替换变量(可以对变量进行全文替换) 将一段文本中的符合条件的所有字符串替换 最终代码先呈上来 // string.replace(new RegExp(key,'g'),"b"); const regex = /\/media\/g/; // let res = regex.test('/media/'); let sTr = "<p><img src=\"/media/goods/images/2_2017071916

JS正则四个反斜杠的含义

我们首先来看如下代码,在浏览器中输出的是什么? // 在浏览器中输出的 console.log('\\'); // 输出 \ console.log('\\\\'); // 输出 \\ 一:js正则直接量语法对 反斜杠的含义 1.1  \. 一个反斜杠加点号(.)  var reg1 = /^\.$/g; console.log(reg1.test('.')); // 输出 true, 因为 \. 是对元字符.进行转义,因此匹配字符串中的. console.log(reg1.test('a'))