注意点:正则是使用到字符串上的,在
javascript
弱语言中有时候你可能会使用到数字的时候,注意也要转换成字符串
一、定义正则的方式
-
1、简单直接的定义方式(常用这种方式)
var reg = /javascript/gi
-
2、使用对象方式创建一个正则(这种方式的使用创建要匹配的内容是一个变量)
var reg = new RegExp('javascript', gi)
二、元字符的认识
- 1、具有特殊意义的元字符
\
:转义字符,转义后面字符所代表的含义^
:以某一个元字符开始$
:以某一个元字符结束\n
:匹配一个换行符.
:除了\n以外的任意字符\o
:NUL字符(\u0000)\t
:制表符(\u0009)\v
:垂直制表符(\u000B)\f
:换页符(\u000C)\r
:回车符(\u000D)
- 2、代表出现次数的量词元字符
*
:出现0到多次+
:出现1到多次?
:出现0次或者1次(或取消捕获时候的贪婪性){n}
:出现n次{n,m}
:出现n到m次
三、修饰符的认识
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
:匹配一个空白字符、空格\S
: 匹配一个非空字符()
:分组,把一个大正则本身划分成几个小的正则,例如:var reg = /^(\d+)zhufeng(\d+)$/
;
四、几个修饰符
- 1、
g
表示全局匹配 - 2、
i
表示忽视大小写 - 3、
m
表示可以多行匹配
五、[]
的使用
-
1、在中括号中出现的所有的字符都是代表本身的意思的字符(没有特殊含义)
var reg = /[.]/ //匹配到. var reg = /\./ //匹配到.
-
2、表示任意一个字符
var reg = /[xyz]/ // 表示匹配x或y或者z var reg = /[a-zA-Z]/ // 表示a-z或者A-Z中任意一个
-
3、中括号不识别两位数
var reg = /^[12]$/; // --> 1或者2中的一个(符合[xyz]) var reg = /^[12-68]$/; // --> 1、2-6中的一个、8 三个中的一个 var reg = /^[\d]+$/; // 表示匹配一个或者多少数字
-
4、取反操作
var reg = /[^abc]/; // 表示除了abc其它的字符
六、()
的作用(类似数学一样的改变运算的优先级)
-
1、分组的使用
var reg = /^18|19$/; // 18、19、181、189、119、819、1819这些都符合 var reg = /^(18|19)$/; // 只能18或者19
七、正则中几个重要的方法
-
1、
test
方法用于测试给定的字符串是否符合条件,返回true
或者false
var reg = /[x|y]/ reg.test('|')
-
2、
match
把所有和正则匹配的字符都获取到(简单理解就是提取内容)var str = 'hello JAVA and javascript'; str.match(/java/gi); // 返回["JAVA", "java"]
-
3、
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
-
4、
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"],然后再利用标签拼接
-
5、
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(); })
-
-
6、
search
搜索方法,搜索到匹配的内容返回下标,否则返回-1var str = 'hello JAVA and javascript'; str.search(/java/i);
八、关于$1....$9
的认识
-
1、
()
在正则中表示分组的意思 -
2、
$
就是表示分组后的占位符,其中0...9
表示分组后的序列号 -
3、
$1...$9
要和()
分组结合起来使用 -
4、使用案例
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'
-
5、驼峰改为中划线
export const splitStr = (str) => str ? str.replace(/([A-Z])/g," $1").toLowerCase() : '';
九、部分案例
-
1、匹配身份证号码
var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/; var str = "350324202904190216"; str.match(reg)
-
2、把数字转换为大写数字
var ary = ['零', '壹', '贰', '叁', '肆', '伍', '陆','柒', '捌', '玖', '拾']; '200801'.replace(/\d/g, (args1, args2, args3) => { // 第一个参数的匹配到的数字,第二个参数是匹配到的index,第三个参数的整个字符串 console.log(args1, args2, args3) return ary[args1] })
-
3、英文首字母大写
var str = 'hello word'; str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
-
4、匹配空字符
var reg = /^$/ reg.test(''); // 返回true
-
5、匹配一个字符或者空格开始
var reg = /(^|\\s)(|\\s$)/;
-
6、货币千分位
const currency = (str) => str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
十、扩展点
-
1、文本框需要输入特殊字符
'.*'.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 输出结果:"\.\*"