资讯专栏INFORMATION COLUMN

JS应用之正则表达式

omgdog / 3016人阅读

摘要:定义正则表达式是用于匹配字符串中字符组合的模式。使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的方法。常用的正则表达式手机号邮政编码校验匹配汉字简易邮箱校验

定义

正则表达式是用于匹配字符串中字符组合的模式。

创建正则表达式

两种方式:

1.new RegExp()

let pattern1 = new RegExp("cat"); //第一个参数字符串
let pattern2 = new RegEXP("cat", "ig"); //第二个参数可选模式修饰符

i:忽略大小写

g:全局匹配,即模式被应用于所有字符串,而非匹配到第一项时立即停止

m:多行匹配

y:执行“粘性”搜索,匹配从目标字符串的当前位置开始,可以使用y标志

2.字面量(以下栗子均使用字面量的方式创建正则表达式)

let pattern3 = /cat/;
let pattern4 = /cat/ig;
匹配正则表达式

1.test
在字符串中测试是否匹配的RegExp方法,它返回true或false。

let str = "This is a cat!";
console.log(pattern4.test(str)); //true

2.exec
在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。

console.log(pattern4.exec(str)); //[cat]

3.match
在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。

console.log(str.match(pattern4)); //[cat]

4.replace
在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。

console.log(str.replace(pattern4, "dog")); //This is a dog!

5.search
在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。

console.log(str.search(pattern4)); //10

6.split
使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。

console.log(str.split(pattern4)); //["This is a ", "!"]
正则表达式语法

重复匹配(?、*、+、.、{m,n})

.匹配除换行符外的任意字符,单个匹配

x?匹配0个或1个x

x*匹配0个或任意多个x

x+匹配至少1个x

x{m,n}匹配最少m,最多n个的x,闭区间

(xyz){m,n}把xyz看成一个整体,匹配xyz最少m次最多n次

chrome|firefox|ie匹配chrome或者firefox或者ie中的任意一个

let str = "google",
    str1 = "gooooogle",
    str2 = "ggle",
    pattern = /g..gle/,
    pattern1 = /go*gle/,
    pattern2 = /go+gle/,
    pattern3 = /g.*gle/,//0个或多个的任意字符
    pattern4 = /go?gle/,
    pattern5 = /go{2,4}gle/,
    pattern6 = /go{3}gle/,//匹配3个o->gooogle
    pattern7 = /go{3,}gle/;//匹配3个或3个以上o
    
console.log(pattern.test(str));//true
console.log(pattern1.test(str));//true
console.log(pattern1.test(str1));//true
console.log(pattern2.test(str1));//true
console.log(pattern2.test(str2));//false
console.log(pattern3.test(str));//true
console.log(pattern3.test(str2));//true
console.log(pattern4.test(str));//false
console.log(pattern7.test(str1));//true

字符类匹配

[a-z]*表示任意个a-z中的字符

[A-Z]*表示任意个A-Z中的字符

[0-9]*表示任意个0-9中的字符

[a-zA-Z0-9]表示匹配一个以上三种情况下的任意一个字符

[^0-9]表示非0-9的任意字符

^[0-9]表示以0-9为起始字符,^表示从起始位置开始匹配

[0-9]$表示以0-9为结束字符,$表示匹配结束位置

/d匹配数字,同[0-9]

/D匹配非数字,同[ ^0-9]

/w匹配字母数字及下划线_,同[a-zA-Z0-9_]

/W匹配非字母数字及下划线_,同[^a-zA-Z0-9_]

匹配单词边界

B匹配非单词边界

空白字符

匹配null字符

f匹配换页字符

匹配换行符

匹配回车字符

匹配制表符

s匹配空白字符、空格、制表符和换行符

S匹配非空白字符

贪婪模式和非贪婪模式
?紧跟在任何量词 *、 +、? 或 {} 的后面,将会使量词变为非贪婪的(匹配尽量少的字符),和缺省使用的贪婪模式(匹配尽可能多的字符)正好相反。

console.log("123abc".match(/d+/)); //[123]
console.log("123abc".match(/d+?/)); //[1]

捕获和非捕获
(x)匹配 "x" 并且记住匹配项。括号被称为 捕获括号。

console.log(/(d+)([a-z]+)/.exec("123abc")); //[12abc, 123, abc]
console.log(/(d+)(?:[a-z]+)/.exec("123abc")); //[123abc, 123]

正向肯定查找和正向否定查找
x(?=y)匹配"x"仅仅当"x"后面跟着"y".这种叫做正向肯定查找。
x(?!y)匹配"x"仅仅当"x"后面不跟着"y",这个叫做正向否定查找。

console.log(/goo(?=gle)/.exec("google")); //[goo]
console.log(/goo(?=gle)/.exec("goodu")); //null

console.log(/goo(?!gle)/.exec("google")); //null
console.log(/goo(?!gle)/.exec("goodu")); //[goo]
常用的正则表达式

1.手机号(1xxxxxxxxxx):/^1[0-9]{10}$/
2.邮政编码校验:/[1-9][0-9]{5}/
3.匹配汉字:[u4e00-u9fa5]
4.简易邮箱校验:/^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+).([a-zA-Z]{2,4})$/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98916.html

相关文章

  • js正则达式

    摘要:用正则表达式语言创建的。匹配非数字的字符使用元字符元字符在正则表达式中有特殊含义的字符。正则表达式默认是区别大小写的。正则表达式的字符串表示。若是一个正则表达式,若有标志则替换所有匹配之处,若没有则只替换第一个匹配之处。 前言 好久之前就说要写一篇正则表达式的文章,正则表达式总是记了又忘,忘了再记,记了再忘,卒。言归正传,今天终于要研究一下这个谜一样的正则表达式了。其实正则表达式并不难...

    wendux 评论0 收藏0
  • H5学习

    摘要:为此决定自研一个富文本编辑器。本文,主要介绍如何实现富文本编辑器,和解决一些不同浏览器和设备之间的。 对ES6Generator函数的理解 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。 JavaScript 设计模式 ② 巧用工厂模式和创建者模式 我为什么把他们两个放在一起讲?我觉得这两个设计模式有相似之处,有时候会一个设计模式不能满...

    aristark 评论0 收藏0
  • 正则达式前端使用手册

    摘要:非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。 导读 你有没有在搜索文本的时候绞尽脑汁, 试了一个又一个表达式, 还是不行. 你有没有在表单验证的时候, 只是做做样子(只要不为空就好), 然后烧香拜佛, 虔诚祈祷, 千万不要出错. 你有没有在使用sed 和 grep 命令的时候, 感觉莫名其妙, 明明应该支持的元字符, 却就是匹配不到. 甚至,...

    zhoutao 评论0 收藏0
  • 小tips:JS按位取反,语法标签label,正则达式中replace的0,1是什么?

    摘要:按位取反按位取反运算符,对一个表达式执行位非求非运算。如果语句后面不使用标签,则只能进入下一轮的内层循环。语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。代表的是分组,即小括号里面的小正则捕获到的内容。 JS按位取反 Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算。如 ~1 = -2; ~2 = -3;来看看~1的计算步骤: 将1(这里...

    n7then 评论0 收藏0

发表评论

0条评论

omgdog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<