JS正则表达式入门

jiezi

6 年前

什么是正则表达式？
正则表达式其实就是，在一个字符串序列中，按照你自己想要的匹配模式，将字符串搜索或替换的过程
正则表达式结构
/ 正则表达式主体 / 修饰符(可选)

// 实例如下：
const patr = /china/i
解析：/china/i 是一个正则表达式，其中 china 是一个正则表达式主体，i 是一个修饰符(搜索不区分大小写)
使用正则表达式方法
search 方法
检索字符串中指定的字符串，并且返回子串的起始位置
const str = “hello world!”;
const n = str.search(/hello/);
console.log(n); // 输出结果为 0
replace 方法
在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
const str = “hello world!”;
const newstr = str.replace(/hello/, ‘hi’);
console.log(newstr); // 输出结果为 hi world!
match 方法
可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，但是它返回指定的值，而不是字符串的位置
const str = ‘hello world!’;
const arr = str.match(/o/g);
console.log(arr); // 输出结果[‘o’, ‘o’]
test 方法
用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false
const str = ‘hello word!’;
const regx = /o/;
const flag = regx.test(str);
console.log(flag); // 输出结果 true
exec 方法
返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
const str = ‘abc123abc321’;
const pattern = /^abc/g;
const flag = pattern.exec(str);
console.log(flag); //[“abc”, index: 0, input: “abc123abc321”, groups: undefined]
常见的正则表达式修饰符
i 不区分 (ignore) 大小写
/abc/i 可以匹配 abc、aBC、Abc
g 全局 (global) 匹配
如果不带 g, 从左往右搜索，找到第一个符合条件就返回；如果带 g，则从左往右，找到每个符合条件的都记录下来，如下：
const str = ‘hello world!’;
const n1 = str.match(/o/g);
console.log(n1); // 输出结果[“o”, “o”]
const n2 = str.match(/o/);
console.log(n2); // 输出结果[“o”, index: 4, input: “hello world!”]

m 多 (more) 行匹配
如果字符串中存在 n 并且有开始 ^ 或结束 $ 符的情况下，会默认作为一个换行符，g 只匹配第一行，加上 m 则可以匹配多行，如下：
const str = ‘hello\nworld\nhello world\ngood hello’;
const n1 = str.match(/^hello/gm);
console.log(n1); // 输出结果：[“hello”, “hello”]
const n2 = str.match(/world$/g);
console.log(n2); // 输出结果：null
n2 输出为 null，是因为没有 m 则只匹配第一行，第一行中没有与之匹配的字符串，所有输出 null
正则表达式语法
定位符
^ 符：匹配字符串开始的位置
const str = ‘hello world!’;
const pattr1 = /^hello/;
const flag1 = pattr1.test(str);
console.log(flag1); // 输出结果：true

const pattr2 = /^world/;
const flag2 = pattr2.test(str);
console.log(flag2); // 输出结果：false
$ 符：匹配字符串结束的位置
const str = ‘hello world’;
const pattr1 = /hello$/;
const flag1 = pattr1.test(str);
console.log(flag1); // 输出结果：false

const pattr2 = /world$/;
const flag2 = pattr2.test(str);
console.log(flag2); //true
b 符：单词边界匹配，匹配单词的开头或结尾的位置，匹配的是一个位置
const str = ‘word’;
const pattern1 = /word\b/;
const flag1 = pattern1.test(str);
console.log(flag1); //true

const pattern2 = /\bword/;
const flag2 = pattern2.test(str);
console.log(flag2); //true

const str1 = ‘hello,world’
const pattern3 = /hello\b/;
const flag3 = pattern3.test(str1);
console.log(flag3); //true

const pattern4 = /hello\bworld/;
const flag4 = pattern4.test(str1);
console.log(flag4); //false
如果 b 在模式的开头和结尾那没有问题，但是如果 b 在两个单词之间，则得都符合 b 左右匹配的模式
B 符：非单词边界匹配，其实就是 b 的相反，b 匹配的是单词，而 B 匹配的是非单词
const str = ‘hello, 你好！我是小明！’;
const pattern1 = /\B/;
const arr1 = str.split(pattern1);
console.log(arr1);
// 输出结果：[“h”, “e”, “l”, “l”, “o,”, ” “, “ 你 ”, “ 好 ”, “！”, “ 我 ”, “ 是 ”, “ 小 ”, “ 明 ”, “！”]

const pattern2 = /\b/;
const arr2 = str.split(pattern2);
console.log(arr2);
// 输出结果：[“hello”, “, 你好！我是小明！”]
从上面例子中可以看出，b 是可以把单词匹配出来，而 B 不管是什么都分隔，如果在一个字符串中，有中英文，符合等等组成，如果要把里面的单词单独提取出来，则可以使用 b 来提取单词
特殊字符
. 符：匹配除换行符以外的任意单字符
const str = ‘\n’;
const pattern = /./gm;
const flag1 = pattern.test(str);
console.log(flag1); //false

w 符：匹配字母或数字或下划线（等价于 '[A-Za-z0-9_]’）
const str = ‘^^##hello, 123’;
const pattern = /^\w/;
const flag1 = pattern.test(str);
console.log(flag1); //false
const str = ‘ 你好 hello!’;
const pattern = /^\w/;
const flag = pattern.test(str);
console.log(flag); // false
如果头部是汉字或者符号(除下划线)，则返回 false
W：用于匹配所有与 w 不匹配的字符
s 符：匹配任意的空白符（等价于 [fnrtv]）
const str = ‘abc’;
const pattern = /\s/;
const flag1 = pattern.test(str);;
console.log(flag1); // false

const str1 = ‘abc cde’;
const flag2 = pattern.test(str1);
console.log(flag2); // true
S 符：匹配除单个空格符之外的所有字符（非 s）
d 符：匹配数字
const str = ‘123’;
const pattern = /\d/;
const flag1 = pattern.test(str);
console.log(flag1); // true

const str1 = ‘abc’;
const flag2 = pattern.test(str1);
console.log(flag2); // false
限定符
* 符：匹配前面的子表达式重复出现 0 次或多次(可有可无)
const str = ‘123abc###’;
const pattern = /(\d)*/;
const flag1 = pattern.test(str);
console.log(flag1); // true
+ 符：匹配前面的子表达式重复出现一次或更多次(至少一次)
const str = ‘abc###’;
const pattern = /(\d)+/;
const flag1 = pattern.test(str);
console.log(flag1); // false

1：查找任何不在方括号之间的字符
const str = ‘my name is lucy!’;
const pattern = /^[^mpo]/;
const flag = pattern.test(str);
console.log(flag); // false
const str = ‘my name is lucy!’;
const pattern = /^[^lpo]/;
const flag = pattern.test(str);
console.log(flag); // true
[0-9]：查找任何从 0 至 9 的数字
const str = ‘hello,123’;
const pattern = /[0-9]$/;
const flag = pattern.test(str);
console.log(flag); // true
[a-z]：查找任何从小写 a 到小写 z 的字符
const str = ‘hello,123’;
const pattern = /^[a-z]/;
const flag = pattern.test(str);
console.log(flag); // true
[A-Z]：查找任何从大写 A 到大写 Z 的字符
const str = ‘hello,123’;
const pattern = /^[A-Z]/;
const flag = pattern.test(str);
console.log(flag); // false
简单正式表达式实例
1. 只能是数字或英文
const str1 = ‘123456’;
const str2 = ‘ 你好，123’;
const str3 = “”;
const pattern = /^[a-zA-Z0-9]+$/;
const flag1 = pattern.test(str1);
const flag2 = pattern.test(str2);
const flag3 = pattern.test(str3);

console.log(flag1); // true
console.log(flag2); // false
console.log(flag3); // false
2. 中英文开头
const str1 = ‘ 中文 +++123’;
const str2 = ‘word123 你好 ’;
const str3 = ‘321wrod’;
const pattern = /^[\u4e00-\u9fa5A-Za-z]+/;

const flag1 = pattern.test(str1);
const flag2 = pattern.test(str2);
const flag3 = pattern.test(str3);

console.log(flag1); // true
console.log(flag2); // true
console.log(flag3); // false
这里开头以中英文开头，则
^[\u4e00-\u9fa5A-Za-z]+
除了开头要中英文，后面部分随意都可以，没有限制
3. 校验数值
最多保留两位小数
const str1 = 45;
const str2 = 45.5;
const str3 = 45.55;
const str4 = 0.111;
const pattern = /^[0-9]+(.[0-9]{0,2})?$/;
const flag1 = pattern.test(str1);
const flag2 = pattern.test(str2);
const flag3 = pattern.test(str3);
const flag4 = pattern.test(str4);

console.log(flag1); // true
console.log(flag2); // true
console.log(flag3); // true
console.log(flag4); // false
这里可以分成两部分，一部分是整数部分，如下：
^[0-9]+
再一部分是小数部分，如下：
(.[0-9]{0,2})?
小数可以保留一位或者两位或者不保, ? 表示 0 次或者一次
4. 网址 URL 验证
const str1 = ‘www.baidu.com?id=123’;
const str2 = ‘cnds.tang-123/china’;
const str3 = ‘www.baidu.com\311’;
const pattern = /^([\w-]+.)+[\w-]+([\w-./?%&=]*)$/;

const flag1 = pattern.test(str1);
const flag2 = pattern.test(str2);
const flag3 = pattern.test(str3);

console.log(flag1); // true
console.log(flag2); // true
console.log(flag3); // false
开头只能是数字或字母或下划线或 - 至少得一个，则：
^([\w-]+.)+
中间部分也至少得有一次
[\w-]+
到后面的那部分随意，可有可无
([\w-./?%&=]*)
本章节主要就是简单介绍了正则表达式的一些常用的东西，有不对的地方大家可以指出哈

abc ↩