黑马程序员技术交流社区

标题: 【上海校区】出来混总是要还的-JS正则常用的有四种操作... [打印本页]

---

作者: 不二晨    时间: 2018-10-23 09:30
标题: 【上海校区】出来混总是要还的-JS正则常用的有四种操作...
使用正则的目的就三个

• 表单校验( 查找字符串中是否有匹配正则规则的字符 ) 如果满足就 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/ddreplace
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) 注意第二个参数的的规则信息
  

传送门 -> 正则基础方法应用


【转载】
作者：ntscshen
链接：https://juejin.im/post/5bcd3703518825778c497908

---

作者: 小影姐姐    时间: 2018-10-25 09:45

---

作者: 不二晨    时间: 2018-10-25 10:49

---

作者: 魔都黑马少年梦    时间: 2018-11-1 16:58

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2