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)   //是正确的手机号格式

JavaScript 正则的方法

test

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

exec

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

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

• index 属性声明的是匹配文本的第一个字符的位置
• input 属性则存放的是被检索的字符串string

var str = '123 456 789'  //"123 456 789"
var reg = /\d{3}/   
reg.exec(str)

exec方法

用while进行exec方法

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

• 去除字符串两边的空白字符

var str = '  hello world     '
str.replace(/^\s*|\s*$/g,'')  //先正则匹配，再用''替换

replace

split

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

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

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

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

例子：

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