写点东西简单理解 javascript 的正则表达式

定义

var reg = new RegExp("hello")或 var reg = /hello/

var reg = new RegExp(/hello/)

但是不能写成 var reg = new RegExp('/hello/') 会报错

1.test方法

RegExp.prototype.test()——用来测试字符串中是否含有子字符串

/hello/.test("abchello");  // true

一个小问题：

“www.baidu1223.com”

“www.baidu12dfg3.com”

“www.baidu1223.com”

“www.bai2du1ff2323.com”

“www.baidu1fg223.com”

“www.bai4du1sa223.com”

找出上述网址中含有baidu的网址

let a = "www.baidu1223.com"
let b = "www.baidu12dfg3.com"
let c = "www.baidu1223.com"
let d = "www.bai2du1ff2323.com"
let e = "www.baidu1fg223.com"
let f = "www.bai4du1sa223.com"
let arr = [a,b,c,d,e,f]
let test2 = new RegExp('baidu')
var arr2 = []
arr.map(a=>{
let t = test2.test(a)
if (t) {
arr2.push(a)
}
})
console.log(arr2)

原理：将上述网址置于一个数组中，然后对数组进行遍历，用正则表达式去 test 每一个数组元素，如果 test 返回 true，则将该元素置于一个新的数组中，最后将数组打印出来即可。

2. exec 方法

RegExp.prototype.exec方法

从字符串中捕获满足条件的字符串到数组中，但是也有两个区别。

（1）. exec方法一次只能捕获一份子字符串到数组中，无论正则表达式是否有全局属性

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");   // ["hello"]

（2）. 正则表达式对象(也就是JavaScript中的RegExp对象)有一个lastIndex属性，用来表示下一次从哪个位置开始捕获，每一次执行exec方法后，lastIndex就会往后推，直到找不到匹配的字符返回null，然后又从头开始捕获。 这个属性可以用来遍历捕获字符串中的子串。

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0

个人认为这个方法不常用，单纯匹配字符串是否含有该字符时，使用 test 方法即可。

当然，如果想找到各个匹配字符的 lastIndex，可以使用这个方法

字符串关于正则表达式的方法

1. replace 方法

repl
c138
ace 方法 用来替换字符串中的子串，例子如下：

"abchello".replace(/hello/,"hi");   //  "abchi"

一个小问题：

如何使输入框input 只能输入数字和字母？

<input onKeyUp="value=value.replace(/[\W]/g,'')">

原理：将所有的非字母数字下划线的字符串去掉。

如何只输入中文？

<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">

如何只输入数字？

<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')">

如何只输入字母？

<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

如何只输入这三者？

<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">

看到这里就要拓展一下——正则中的 () [] {} 三种括号。

() —— 正则表达式可以用 ” () ” 来进行分组，具有分组的正则表达式除了正则表达式整体会匹配子字符串外，分组中的正则表达式片段也会匹配字符串。简单的说就是，()可以包含一个字符串片段。

[] —— 在 [] 中使用符号 - ，可以用来表示字符范围。

// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/
// 匹配汉字
/[\u4E00-\u9FA5]/.test("测试");  // true

{} —— 重复n次 {n}

//重复n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]

//重复n次或更多次  {n,}
"test123".match(/test\d{3,}/); //  ["test123"]

//重复n到m次
"test12".match(/test\d{3,5}/); //  null
"test12345".match(/test\d{3,5}/);  // ["test12345"]
"test12345678".match(/test\d{3,5}/);  // ["test12345"]

/[\W]/g

反义元字符 —— 写法就是把上面的小写字母变成大写的，比如 ：

\W —— 匹配所有不是数字字母下划线的字符串

看到这里就要拓展一下——正则中的元字符。

//匹配数字:  \d
"ad3ad2ad".match(/\d/g);  // ["3", "2"]

//匹配除换行符以外的任意字符:  .
"a\nb\rc".match(/./g);  // ["a", "b", "c"]

//匹配字母或数字或下划线 ： \w
"a5_  汉字@!-=".match(/\w/g);  // ["a", "5", "_"]

//匹配空白符:\s
"\n \r".match(/\s/g);  //[" ", " ", ""] 第一个结果是\n，最后一个结果是\r
\n换行(LF) ，将当前位置移到下一行开头
\r回车(CR) ，将当前位置移到本行开头

//匹配【单词开始或结束】的位置 ： \b
"how are you".match(/\b\w/g);  //["h", "a", "y"]

// 匹配【字符串开始和结束】的位置:  开始 ^ 结束 $
"how are you".match(/^\w/g); // ["h"]
"how are you".match(/\w$/g); // ["u"]

字符转义——在正则表达式中元字符是有特殊的含义的，当我们要匹配元字符本身时，就需要用到字符转义

字符转义符号：/

/\./.test("."); // true

元字符：\n   \t   \w   \v   \r   \d    \   $   *   ^   +  ?   \b   \f    \s

2.String.prototype.search()方法

"abchello".search(/hello/);  //  3

用来找出原字符串中某个子字符串首次出现的index，没有则返回-1

3.String.prototype.split（）方法

"abchelloasdasdhelloasd".split(/hello/);  //["abc", "asdasd", "asd"]

用来分割字符串，类似将‘hello’视为分割符号，所以它也不见了

4. String.prototype.match（）方法

用来捕获字符串中的子字符串到一个数组中。默认情况下只捕获一个结果到数组中，正则表达式有”全局捕获“的属性时(定义正则表达式的时候添加参数g)，会捕获所有结果到数组中。

"abchelloasdasdhelloasd".match(/hello/);  //["hello"]
"abchelloasdasdhelloasd".match(/hello/g);  //["hello","hello"]

★. g代表全局搜索

希望本文章让你对js正则有一个细致的理解！