前言:能看到这篇随笔的朋友肯定, 多多少少接触过正则( 不过还记得多少, 只有"天"知道 ), 基础语法知识咱先扔一边, 先从实际编程入手去, 验证浏览器中正则的四种常规操作: 验证、切分、提取、替换
使用正则的目的就三个
- 表单校验( 查找字符串中是否有匹配正则规则的字符 ) 如果满足就 XX, 如果没满足就 OO
- 提取字符串中的内容(分组) - 提取之后做后续操作(替换
replace
就是提取的后续操作)- 切分
split
1. 验证
验证:查找字符串中是否有匹配正则规则的字符。 先来一道基础题
Demo1 判断一个字符串中是否包含"hello" ( 判断字符串中是否包含某个字符串 )
String对象上的方法
方法一: indexOf()
let str = "hello world!";
console.log(str.indexOf("hello") != -1); // true
// 不是正则, 但却是解决当前题的一种方案,
// indexOf()方法返回调用String对象中第一次出现的指定值的索引, 如果未找到该值, 则返回-1
复制代码
方法二: includes()
let str = "hello world!";
console.log(str.includes("hello")); // true
// includes() 方法用于判断一个字符串是否包含在另一个字符串中, 根据情况返回true或false
复制代码
方法三: search()
let str = "hello world!";
console.log(str.search(/hello/) != -1);
// 只有一个参数, 并且是一个正则表达式对象, 如果传入一个非正则表达式对象,
// 则会使用 new RegExp(obj)隐式地将其转换为正则表达式对象
// 如果匹配成功, 则返回正则表达式在字符串中首次匹配项的索引, 否则, 返回-1
复制代码
方法四: match()
let str = "hello world!";
console.log(!!str.match(/hello/g));
// 如果传入一个非正则表达式对象, 则会隐式地使用new RegExp(obj)将其转换为一个RegExp
// 返回值(数组), 如果匹配到数组第一项是匹配的完整字符串, 之后项是用圆括号捕获的结果, 如果没有匹配到, 返回null
// 如果正则表达式包含g标志, 则该方法返回一个Array, 它包含所有匹配的子字符串而不是匹配对象
复制代码
RegExp 对象上的方法
方法五: test()
let str = "hello world!";
console.log(/hello/.test(str));
// 用来查看正则表达式与指定的字符串是否匹配, 返回true或false
// 想要知道一个模式是否存在于一个字符串中, 可以使用test()或者search
复制代码
方法六: exec()
let str = "hello world!";
console.log(!!/hello/.exec(str));
// exec() 方法在一个指定字符串中执行一个搜索匹配, 返回一个结果数组或null,
// 如果只是为了判断是否匹配(true或false), 可以使用RegExp.test()方法, 或者String.search()方法
复制代码
验证总结:
- 一个确认的( 精准匹配 )字符查找是否被包含, 使用
String.indexOf() 和 String.includes()
- 一个有规则的( 模糊匹配 )字符查找是否被包含, 使用
RegExp.test() 和 String.search()
- 查找不推荐, 使用
String.match() 和 RegExp.exec()
切分
切分:所谓"切分", 就是把目标字符串, 切分成一块一块的, 在
JS
中使用split
Demo2 目标字符串是"html,css,javascript", 按逗号切分
let regex = /,/;
let str = "html,css,javascript";
let str2 = "2018/10/18";
console.log(str.split(regex));
console.log(str2.split(/\//));
复制代码
split()
方法使用指定的分隔符字符串将一个String
对象分割成字符串数组, 以将字符串分隔为子字符串, 以确认每个拆分的位置分隔符可以是一个字符串或正则表达式
提取
提取:很多时候需要提取部分匹配的数据, 通常需要使用分组引用( 分组捕获 )
Demo3 提取年月日
方法一: match()
let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
console.log(str.match(regex));
复制代码
方法二: exec()
let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
console.log(regex.exec(str));
复制代码
方法三: test()
let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
regex.test(str);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
复制代码
方法四: search()
let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
str.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
复制代码
方法五: replace()
let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
let date = [];
str.replace(regex, function(match, year, month, day) {
date.push(year, month, day);
});
console.log(date);
复制代码
提取总结: 本质上是捕获分组 推荐使用
match
和exec
其中, 最常用的是match
String.prototype.match();
参数: 一个正则表达式对象, 如果传入一个非正则表达式对象, 则会隐式地使用new RegExp(obj)
将其转换为一个RegExp
, 如果你为提供任何参数, 直接使用match()
, 那么你会得到一个包含空字符串的数组[""]
返回值:如果字符串匹配到了表达式, 会返回一个数组, 数组第一项是进行匹配完整的字符串, 之后的项是用圆括号捕获的结果, 如果没有匹配到, 则返回
null
如果正则表达式不包含
g
标志, 则str.match()
会返回和RegExp.exec()
相同的结果。而且返回的Array
拥有一个额外的input
属性, 该属性包含被解析的原始字符串, 另外, 还拥有一个index
属性, 该属性表示匹配结果在原字符中的索引如果正则表达式包含
g
标志, 则该方法返回一个Array
, 它包含所有匹配的子字符串而不是匹配对象, 捕获组不会被返回( 即不返回index
属性和input
属性 )。如果没有匹配到, 则返回null
。
RegExp.exec()
方法在一个指定字符串中执行一个搜索匹配, 返回一个结果数组或null
String.match()
和 RegExp.exec()
的主要区别
- 所属类不同
- 跟
g
有关 -
exec
只会匹配第一个符合的字符串( 意味着g
对其不起作用 )和所有分组的反向引用, 虽然g
对其不生效,但其使用lastIndex
和while
循环, 可以达到g
的目的, 这点比match
强大 -
match
返回的数组内容, 跟正则表达式中是否带g
有关系( 如果带g
, 包含的是所有匹配的子字符串 ) 如果不带g
== 默认的exec
替换
使用正则的目的, 往往是匹配到对应的规则的字符, 下一步常常是替换^_^
正则处理中最强大的 API, 划重点、划重点、划重点, 因为其常常被一些伪装者, 假借替换之名, 做一些皮肉生意
Demo4 从 yyyy-mm-dd 替换成 yyyy/mm/dd
let str = "2018-10-18";
let regex = /-/g;
console.log(str.replace(regex, "/"));
复制代码
String.replace();
有两种使用形式, 第二个参数时字符串还是函数一、当其为字符串时如下字符有特殊含义
$1,$2 ... $99
匹配1-99
个分组捕获的文本二、当其为函数时, 回调函数的参数具体意义
match
( 匹配内容 ),$1
( 分组1 ),$2
( 分组2 ),index
( 索引 ),input
( 原字符内容 )
总结
- 验证一个字符串( 精准匹配 )是否被包含, 使用
String.indexOf()
、String.includes()
- 验证一个字符串( 模糊匹配 )是否被包含, 使用
String.search()
、RegExp.test()
- 切分一段字符串( 无论确认字符和规则字符 ), 使用
String.split(字符串/正则)
- 提取分组捕获信息, 使用
String.match()
、RegExp.exec()
注意区分它们之间的区别 ->g
- 替换, 使用
String.replace(String/RegExp, string/function)
注意第二个参数的的规则信息
传送门 -> 正则基础方法应用
参考
《Javascript 正则表达式迷你书》