JavaScript中正则表达式的使用

时间 2019-11-17

标签 javascript 正则表达式使用栏目 JavaScript 繁體版

原文原文链接

注意点:正则是使用到字符串上的,在javascript弱语言中有时候你可能会使用到数字的时候,注意也要转换成字符串javascript

1、定义正则的方式

一、简单直接的定义方式(经常使用这种方式)css
```
var reg = /javascript/gi
复制代码
```
二、使用对象方式建立一个正则(这种方式的使用建立要匹配的内容是一个变量)java
```
var reg = new RegExp('javascript', gi)
复制代码
```

2、元字符的认识

一、具备特殊意义的元字符
- \：转义字符，转义后面字符所表明的含义
- ^：以某一个元字符开始
- $：以某一个元字符结束
- \n：匹配一个换行符
- . ：除了\n之外的任意字符
- \o：NUL字符(\u0000)
- \t：制表符(\u0009)
- \v：垂直制表符(\u000B)
- \f：换页符(\u000C)
- \r：回车符(\u000D)
二、表明出现次数的量词元字符
- *：出现0到屡次
- +：出现1到屡次
- ?：出现0次或者1次(或取消捕获时候的贪婪性)
- {n}：出现n次
- {n,m}：出现n到m次

3、修饰符的认识

x|y：x或y中的一个
[xyz]：x或y或z中的一个
[^xyz]：除了xyz之外的任意一个字符
[a-z]：a-z之间的任何一个字符
[^a-z]：除了a-z之间的任何一个字符
\d：一个0~9之间的数字
\D：除了0~9之间的数字之外的任何字符
\b：一个边界符
\w：数字、字母、下划线中的任意一个字符
\s：匹配一个空白字符、空格
()：分组，把一个大正则自己划分红几个小的正则，例如：var reg = /^(\d+)zhufeng(\d+)$/;

4、几个修饰符

一、g表示全局匹配
二、i表示忽视大小写
三、m表示能够多行匹配

5、`[]`的使用

一、在中括号中出现的全部的字符都是表明自己的意思的字符（没有特殊含义）函数
```
var reg = /[.]/ //匹配到.
var reg = /\./  //匹配到.
复制代码
```

二、表示任意一个字符测试

var reg = /[xyz]/ // 表示匹配x或y或者z
var reg = /[a-zA-Z]/ // 表示a-z或者A-Z中任意一个
复制代码

三、中括号不识别两位数ui

var reg = /^[12]$/; // --> 1或者2中的一个（符合[xyz]）
var reg = /^[12-68]$/; // --> 一、2-6中的一个、8 三个中的一个
var reg = /^[\d]+$/; // 表示匹配一个或者多少数字
复制代码

四、取反操做spa

var reg = /[^abc]/; // 表示除了abc其它的字符
复制代码

6、`()`的做用(相似数学同样的改变运算的优先级)

一、分组的使用code

var reg = /^18|19$/; // 1八、1九、18一、18九、11九、81九、1819这些都符合
var reg = /^(18|19)$/; // 只能18或者19
复制代码

7、正则中几个重要的方法

一、test方法用于测试给定的字符串是否符合条件,返回true或者falseregexp
```
var reg = /[x|y]/
reg.test('|')
复制代码
```

二、match把全部和正则匹配的字符都获取到(简单理解就是提取内容)对象

var str = 'hello JAVA and javascript';
str.match(/java/gi); // 返回["JAVA", "java"]
复制代码

三、exec匹配(一步一步的执行)

会返回一个Array，第一个元素是匹配到的元素,第二个元素是匹配到的元素在字符串中的位置,第三个元素是整个字符串,若是没有匹配到就返回null

var str = 'hello JAVA and javascript';
var reg = /java/gi;
reg.exec(str); // 返回["JAVA", index: 6, input: "hello JAVA and javascript"]
reg.exec(str); // 返回["java", index: 15, input: "hello JAVA and javascript"]
reg.exec(str); // 返回null
复制代码

四、split切割(也许你会说字符串自己就有split合并用正则的split)

'a b c'.split(' '); // 返回["a", "b", "", "", "c"]
'a,b, c d'.split(/[\s\,]+/); // 返回["a", "b", "c", "d"]
**下面这个是我项目中使用到了,文字高亮**
var str = 'helloJAVAandjavascript';
str.split(/(java)/gi); // 返回["hello", "JAVA", "and", "java", "script"],而后再利用标签拼接
复制代码

五、replace替换,在字符串中也提供了一个相同的方法

使用字符串的替换

var str = 'iceman2016iceman2017';
str.replace('iceman','shoushou');
复制代码

使用正则的替换

var str = 'iceman2016iceman2017';
str.replace(/iceman/g, 'shoushou');
复制代码

第二个参数还能够是函数

var str = 'iceman2016iceman2017';
str.replace(/iceman/g, function () {
    // 第一个参数是正则匹配到的,
    // 第二个参数是若是有分组就是匹配到分组的,若是没有分组匹配到的字符在整个字符中的index
    // 第三个参数是原来的字符
    // 第一次执行匿名函数输出arguments的结果：["iceman", 0, "iceman2016iceman2017"]
    // 第二次执行匿名函数输出arguments的结果：["iceman", 10, "iceman2016iceman2017"]
    console.log(arguments);
    return 'shoushou';
});
复制代码

关于replace第二个参数的说明

var str = 'he12llo wo21rd';
str.replace(/o/g, function (all, letter,) {
  console.log(all)
  console.log('====',letter) // 返回是6，9
});
复制代码

var str = 'he12llo wo21rd';
str.replace(/(o)/g, function (all, letter,) {
  console.log(all)
  console.log('====',letter) // 返回是o, o
});
复制代码

replace的使用案例(转换为驼峰命名)

var s1 = 'foo-style-css';
s1 = s1.replace(/-(\w)/g, function (all, letter) {
  return letter.toUpperCase();
})
复制代码

六、search搜索方法,搜索到匹配的内容返回下标,不然返回-1
```
var str = 'hello JAVA and javascript';
str.search(/java/i);
复制代码
```

8、关于`$1....$9`的认识

一、()在正则中表示分组的意思
二、$就是表示分组后的占位符,其中0...9表示分组后的序列号
三、$1...$9要和()分组结合起来使用

四、使用案例

var s="abcdefghijklmn";
var reg = /(a)(b)(c)(d)(e)(f)(g)(h)(i)(j)(k)(l)(m)(n)/gi;
var result = s.replace(reg, '$1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14');
// 返回结果:'a,b,c,d,e,f,g,h,i,j,k,l,m,n'
复制代码

五、驼峰改成中划线

export const splitStr = (str) => str ? str.replace(/([A-Z])/g," $1").toLowerCase() : '';
复制代码

9、部分案例

一、匹配身份证号码

var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/;
var str = "350324202904190216";
str.match(reg)
复制代码

二、把数字转换为大写数字

var ary = ['零', '壹', '贰', '叁', '肆', '伍', '陆','柒', '捌', '玖', '拾'];
'200801'.replace(/\d/g, (args1, args2, args3) => {
    // 第一个参数的匹配到的数字,第二个参数是匹配到的index,第三个参数的整个字符串
	console.log(args1, args2, args3)
	return ary[args1]
})
复制代码

三、英文首字母大写

var str = 'hello word';
str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
复制代码

四、匹配空字符

var reg = /^$/
reg.test(''); // 返回true
复制代码

五、匹配一个字符或者空格开始

var reg = /(^|\\s)(|\\s$)/;
复制代码

六、货币千分位

const currency = (str) => str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
复制代码

10、扩展点

一、文本框须要输入特殊字符

'.*'.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
// 输出结果:"\.\*"
复制代码