JavaScript 正则

正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。


创建

JavaScript通过内置对象RegExp支持正则表达式,有两种方式创建正则表达式对象,如果我们想匹配字符串中<%xxx%>两个百分号分割的字符串可以这么写

  • 构造函数

    1
    var reg=new RegExp('<%[^%>]+%>','g');
  • 字面量(一般我们使用)

    1
    var reg=/<%[^%>]%>/g;

最后的g代表全局,还有几个修饰符

g:global,全文搜索,不添加的话搜索到第一个结果停止搜索
i:ingore case,忽略大小写,默认大小写敏感
m:multiple lines,多行搜索

元字符



预定义类



边界

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

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

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

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



$以..结尾

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

1
2
3
4
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单词边界

1
2
3
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"]



精准判断是否在其中

1
2
3
4
5
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后重新判断一次

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


量词

规则

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

解析
+号和*号

1
2
3
4
5
6
7
8
9
//用+号 和 用*号
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的正则:

1
2
3
4
5
6
7
8
9
10
11
12
13

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"]


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

1
2
3
4
5
6
7
8
9
10
11

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

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

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


贪婪模式 / 非贪婪模式

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

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

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

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

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

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

分组

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

1
/evenyao{20}/

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

1
/(evenyao){20}/

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

分组嵌套

  • 从HTML字符串中取出 URL
    1
    2
    3
    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

相当于从数组类型取值


前瞻


1
2
3
4
5
6
7
8
9
10
//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 正则相关函数

  • 去除字符串两边的空白字符的函数
    1
    2
    3
    4
    5
    function trim(str) {
    return str.replace(/^\s*|\s*$/g,'')
    }

    trim(' hello word ')


  • 判断用户输入的是不是合法用户名(长度6-20个字符,只能包括字母、数字、下划线)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function isValidUsername(str) {
    var reg = /^\w{6,20}$/g
    if(reg.test(str)) {
    console.log('是合法的用户名')
    } else {
    console.log('不是合法的用户名')
    }
    }

    isValidUsername('evenyao') //是合法的用户名


  • 判断用户输入的是否是邮箱的函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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') //是正确的邮箱地址


  • 判断用户输入的是否是手机号的函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function isPhoneNum(str) {
    var reg = /^1[34578]\d{9}$/g
    if(reg.test(str)){
    console.log('是正确的手机号格式')
    } else {
    console.log('不是正确的手机号格式')
    }
    }

    isPhoneNum(17300001111) //是正确的手机号格式


JavaScript 正则的方法

test

test方法用于测试字符串参数中是否存正则表达式模式,如果存在则返回true,否则返回false
上面的正则函数就是利用了test返回布尔类型做的

exec

exec方法用于正则表达式模式在字符串中运行查找,如果exec()找到了匹配的文本,则返回一个结果数组,否则返回 null

除了数组元素和length属性之外,exec()方法返回对象还包括两个属性。

  • index 属性声明的是匹配文本的第一个字符的位置
  • input 属性则存放的是被检索的字符串string
    1
    2
    3
    var str = '123 456 789'  //"123 456 789"
    var reg = /\d{3}/
    reg.exec(str)

exec方法
用while进行exec方法

1
2
3
4
5
var str = '123 456 789'  //"123 456 789"
var reg = /\d{3}/g
while(result = reg.exec(str)) {
console.log(result[0]) //因为返回的是数组,所以每次取0位置的值,直到null
}

使用while进行exec方法


match

match()方法将检索字符串,以找到一个或多个与regexp匹配的文本。但regexp是否具有标志 g对结果影响很大。

非全局调用

如果regexp没有标志g,那么match()方法就只能在字符串中执行一次匹配。如果没有找到任何匹配的文本,match() 将返回null。否则它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。

该数组的第一个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性

  • index 属性声明的是匹配文本的起始字符在字符串中的位置
  • input 属性声明的是对 stringObject 的引用

例子
var r = 'aaa123456'.match(/\d/);

全局调用

如果regexp具有标志g则match()方法将执行全局检索,找到字符串中的所有匹配子字符串

若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组

不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是字符串中所有的匹配子串,而且也没有index属性或input属性。

例子
var r = 'aaa123456'.match(/\d/g);


replace

  • 去除字符串两边的空白字符
    1
    2
    var str = '  hello world     '
    str.replace(/^\s*|\s*$/g,'') //先正则匹配,再用''替换

replace

split

我们经常使用split方法把字符串分割为字符数组

1
'a,b,c,d'.split(','); //["a", "b", "c", "d"]

和replace方法类似,在一些复杂的分割情况下我们可以使用正则表达式解决

1
'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"]

例子:

1
2
var str = 'h  e   llo   wo   rld'   //"h  e   llo   wo   rld"
str.split(/\s*/) // ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

split

本文结束  感谢您的阅读
0%