出来混总是要还的-JS正则常用的有四种操作: 验证、切分、提取、替换

栏目: JavaScript · 发布时间: 6年前

内容简介:前言:能看到这篇随笔的朋友肯定, 多多少少接触过正则( 不过还记得多少, 只有"天"知道 ), 基础语法知识咱先扔一边, 先从实际编程入手去, 验证浏览器中正则的四种常规操作: 验证、切分、提取、替换验证:查找字符串中是否有匹配正则规则的字符。 先来一道基础题String对象上的方法

前言:能看到这篇随笔的朋友肯定, 多多少少接触过正则( 不过还记得多少, 只有"天"知道 ), 基础语法知识咱先扔一边, 先从实际编程入手去, 验证浏览器中正则的四种常规操作: 验证、切分、提取、替换

使用正则的目的就三个

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);
复制代码

提取总结: 本质上是捕获分组 推荐使用 matchexec 其中, 最常用的是 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() 的主要区别

  1. 所属类不同
  2. g 有关
  3. exec 只会匹配第一个符合的字符串( 意味着 g 对其不起作用 )和所有分组的反向引用, 虽然 g 对其不生效,但其使用 lastIndexwhile 循环, 可以达到 g 的目的, 这点比 match 强大
  4. match 返回的数组内容, 跟正则表达式中是否带 g 有关系( 如果带 g , 包含的是所有匹配的子字符串 ) 如果不带 g == 默认的 exec

替换

使用正则的目的, 往往是匹配到对应的规则的字符, 下一步常常是替换^_^

正则处理中最强大的 API, 划重点、划重点、划重点 , 因为其常常被一些伪装者, 假借替换之名, 做一些皮肉生意

Demo4 从 yyyy-mm-dd 替换成 yyyy/mm/dd

replace

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 ( 原字符内容 )


以上所述就是小编给大家介绍的《出来混总是要还的-JS正则常用的有四种操作: 验证、切分、提取、替换》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Little MLer

The Little MLer

Matthias Felleisen、Daniel P. Friedman、Duane Bibby、Robin Milner / The MIT Press / 1998-2-19 / USD 34.00

The book, written in the style of The Little Schemer, introduces instructors, students, and practicioners to type-directed functional programming. It covers basic types, quickly moves into datatypes, ......一起来看看 《The Little MLer》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具