JavaScript 正则

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

元字符

预定义类

边界

^在中括号中时，匹配非hello的

str = 'hello world' str.match(/[^hello]/g) //[" ", "w", "r", "d"] 匹配非hello的

^不在中括号时，匹配以hello开头的

str = 'hello world' str.match(/^hello/g) //["hello"]

$以..结尾

str = 'yeah world hello' str.match(/hello$/g) //["hello"]

str = 'hello1 yeah world hello2 root hello3' str.match(/hello\d/g) //["hello1", "hello2", "hello3"] str.match(/hello\d$/g) //["hello3"] str.match(/^hello\d/g) //["hello1"]

\b单词边界

str = 'hello1 hello2orld hello3 12-hello4-333z ccchello7' str.match(/\bhello\d\b/g) //["hello1", "hello3", "hello4"] str.match(/\bhello\d/g) // ["hello1", "hello2", "hello3", "hello4"]

精准判断是否在其中

str = 'header3 clearfix active header-fixed' //判断是否有header str.match(/\bheader\b/g) //["header"] 这里用\b其实是错误的，因为把header-fixed当成了header//应该用 str.match(/(^|\s)header($|\s)/g) //null

修改str后重新判断一次

str = 'header clearfix active header-fixed' str.match(/(^|\s)header($|\s)/g) //["header"]

量词

str = 'http://github.com' str.match(/http?:\/\/.+/g) //["http://github.com"]

+号和*号

//用+号和用*号 str = 'http://github.com' str2 = 'https://github.com' str3 = 'httpssssss://github.com'str.match(/https+:\/\/.+/g) //null 因为+必须出现一次或多次s str.match(/https*:\/\/.+/g) //["http://github.com"] *是0次或多次，所以可以匹配 str2.match(/https*:\/\/.+/g) //["https://github.com"] str3.match(/https*:\/\/.+/g) //["httpssssss://github.com"]

匹配是否是url的正则：

str.match(/^(https?:)?\/\/.+/g)//测试 str = 'http://github.com' str2 = 'https://github.com' str3 = 'httpssssss://github.com' str4 = '//github.com'str.match(/^(https?:)?\/\/.+/g) //["http://github.com"] str2.match(/^(https?:)?\/\/.+/g) //["https://github.com"] str3.match(/^(https?:)?\/\/.+/g) //null str4.match(/^(https?:)?\/\/.+/g) //["//github.com"]

判断用户输入的是一个手机号

str.match(/^1[34578]\d{9}$/g)//测试 str = '17300001111' str2 = '12300001111' str3 = 'ab100001111'str.match(/^1[34578]\d{9}$/g) //["17300001111"] str2.match(/^1[34578]\d{9}$/g) //null str3.match(/^1[34578]\d{9}$/g) //null

即写成函数，判断用户输入的是否是手机号：

function isPhoneNum(str) { if(/^1[34578]\d{9}$/g.test(str)) { console.log("是正确的手机号") } else { console.log("格式错误，不是正确的手机号") } }

贪婪模式 / 非贪婪模式

看了上面介绍的量词，比如{3,5}这个量词，要是在句子中出现了十次，那么他是每次匹配三个还是五个，反正3、4、5都满足3～5的条件

量词在默认下是尽可能多的匹配的，也就是大家常说的贪婪模式

'123456789'.match(/\d{3,5}/g); //["12345", "6789"]

既然有贪婪模式，那么肯定会有非贪婪模式，让正则表达式尽可能少的匹配，也就是说一旦成功匹配不再继续尝试，做法很简单，在量词后加上?即可

'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]

参考:贪婪模式/非贪婪模式之详解 (具体图文分析)

分组

有时候我们希望使用量词的时候匹配多个字符，而不是只是匹配一个，比如希望匹配evenyao出现20次的字符串，我们如果写成 evenyao{20} 的话匹配的是evenyao 中 o 出现20次

/evenyao{20}/

怎么把evenyao作为一个整体呢？使用()就可以达到此目的，我们称为分组

/(evenyao){20}/

或

var reg1 = /hello|world/ //等同于 var reg2 = /(hello)|(world)/

分组嵌套

从HTML字符串中取出 URL

var str = '<a href="https://github.com">' str.match(/href="(https?:\/\/.+?)"/) //["href="https://github.com"", "https://github.com", index: 3, input: "<a href="https://github.com">", groups: undefined] str.match(/href="(https?:\/\/.+?)"/)[1] //https://github.com

前瞻

//even(?=yao) //匹配后面是yao的even(/even(?=yao)/).exec('evenyao123'); //['even'] (/even(?=yao)/).exec('even123yao'); //null//even(?!yao) //匹配后面不yao的even(/even(?!yao)/).exec('evenyao123'); //null (/even(?!yao)/).exec('even123yao'); //['even']

JavaScript 正则相关函数

去除字符串两边的空白字符的函数

function trim(str) { return str.replace(/^\s*|\s*$/g,'') }trim(' hello word ')

判断用户输入的是不是合法用户名（长度6-20个字符，只能包括字母、数字、下划线）

function isValidUsername(str) { var reg = /^\w{6,20}$/g if(reg.test(str)) { console.log('是合法的用户名') } else { console.log('不是合法的用户名') } }isValidUsername('evenyao') //是合法的用户名

判断用户输入的是否是邮箱的函数

function isEmail(str) { var reg = /^\w+\.?\w+@\w+(\.\w+){1,3}$/g //{1,3}是因为大多邮箱@后不会超过3个域名段，如果有这种邮箱格式，换成*即可 if(reg.test(str)) { console.log('是正确的邮箱地址') } else { console.log('不是正确的邮箱地址') } }isEmail('17300001111@163.com') //是正确的邮箱地址

判断用户输入的是否是手机号的函数

function isPhoneNum(str) { var reg = /^1[34578]\d{9}$/g if(reg.test(str)){ console.log('是正确的手机号格式') } else { console.log('不是正确的手机号格式') } }isPhoneNum(17300001111) //是正确的手机号格式