hi,欢迎访问本站!
当前位置: 首页学习笔记正文

JavaScript正则表达式概述

用户投稿 学习笔记 24阅读

JavaScript正则表达式概述 1 正则表达式概述1.1 什么是正则表达式1.2 特点1.3 正则表达式的使用1.4 模式修饰符 2 特殊字符2.1 边界符2.2 预定义类2.3 字符类2.4 取反符 3 量词符与括号字符3.1 量词符3.2 括号字符3.2 捕获与非捕获3.2 贪婪与懒惰匹配3.2 反向引用、零宽断言3.3 正则表达式优先级 4 String类中的方法4.1 match()方法4.2 search()方法4.3 split()方法4.4 replace()方法 5 【案例】查找并替换敏感词

1 正则表达式概述 1.1 什么是正则表达式

正则表达式:是一种描述字符串结构的语法规则,是用于匹配字符串中字符组合的模式,同时正则表达式也是对象。

1.2 特点

1、正则表达式的灵活性。 2、逻辑性和功能性非常强。 3、可以迅速地用极简单的方式达到字符串的复杂控制。

1.3 正则表达式的使用

创建正则对象:

// 字面量方式var 变量名 = /表达式/;// RegExp构造函数方式var 变量名 = new RegExp(/表达式/);

示例:test()方法来检测字符串是否符合正则规则

var str = "123";var reg1 = new RegExp(/123/);var reg2 = /abc/;console.log(reg1.test(str)); // 匹配结果:trueconsole.log(reg2.test(str)); // 匹配结果:false 1.4 模式修饰符

基本语法:/表达式/[switch] switch :表示模式修饰符,是可选的,用于进一步对正则表达式进行设置。

模式符说明g用于在目标字符串中实现全局匹配i忽略大小写m实现多行匹配u以Unicode编码执行正则表达式y粘性匹配,仅匹配目标字符串中此正则表达式的lastIndex属性指示的索引2 特殊字符 2.1 边界符

边界符:正则表达式中的边界符(位置符)用来提示字符所处的位置

边界符说明^表示匹配行首的文本$表示匹配行尾的文本

示例:匹配行首为“a”,行尾为“c”,中间为“b”的字符串

var reg = /^abc$/;console.log(reg.test("abc")); // 结果为:trueconsole.log(reg.test("abcd")); // 结果为falseconsole.log(reg.test("aabcd")); // 结果为falseconsole.log(reg.test("abcabc")); // 结果为false 2.2 预定义类 字符说明.匹配除“\n”外的任何单个字符\d匹配所有0~9之间的任意一个数字,相当于[0-9]\D匹配所有0~9以外的字符,相当于[^0-9]\w匹配任意的字母、数字和下划线,相当于[a-zA-Z0-9]\W除所有字母、数字和下划线以外的字符,相当于[^a-zA-Z0-9]\s匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]\S匹配非空格的字符,相当于[^\t\r\n\v\f]\f匹配一个换页符(form-feed)\b匹配单词分界符。如“\bg”可以匹配“best grade”,结果为“g”\B非单词分界符。如“\Bade”可以匹配“best grade”,结果为“ade”\t匹配一个水平制表符(tab)\n匹配一个换行符(linefeed)\xhh匹配ISO-8859-1值为hh(2个16进制数字)的字符,如“\x61”表示“a”\r匹配一个回车符(carriage return)\v匹配一个垂直制表符(vertical tab)\hhh匹配Unicode 值为 hhhh (4个16进制数字)的字符,如“\u597d”表示“好”

示例:“.”和“\s”的使用 match():从str匹配一个字符,匹配规则是reg

var str = "good idea";// gi:实现全局匹配,并忽略大小写// 匹配空格(\s)+单个字符*2(..)var reg = /\s../gi; // 正则对象console.log(str.match(reg));

结果为:[ ’ id’ ]

转义特殊字符:在正则表达式中可以使用“\”转义特殊字符

var str = "^abc\\1.23*edf$";// gi:全局匹配,匹配任意字符// “|”代表或者// 匹配. 匹配$ 匹配* 匹配^ 匹配\var reg = /\.|\$|\*|\^|\\/gi;console.log(str.match(reg));

匹配结果:[ ‘^’, ‘\’, ‘.’, ‘*’, ‘$’ ]

2.3 字符类

字符类:是一个字符集,匹配相应字符,它就会找到该匹配项。

字符说明\t匹配一个水平制表符(tab)\n匹配一个换行符(linefeed)xhh匹配ISO-8859-1值为hh(2个16进制数字)的字符,如“\x61”表示“a”\r匹配一个回车符(carriage return)\v匹配一个垂直制表符(vertical tab)

字符范围示例:

pattern(模式)说明[cat]匹配字符集合中的任意一个字符c、a、t[^cat]匹配除c、a、t以外的字符[A-Z]匹配字母A~Z范围内的字符[a-z]匹配字母a~z范围内的字符[^a-z]匹配字母a~z范围外的字符[a-zA-Z0-9]匹配大小写字母和0~9范围内的字符[\u4e00-\u9fa5]匹配任意一个中文字符

示例:匹配a、b、c中任何一个字符

var reg = /[abc]/;console.log(reg.test("andy")); // 匹配到了a,结果:trueconsole.log(reg.test("baby")); // 匹配到了b、a,结果:trueconsole.log(reg.test("color")); // 匹配到了c,结果为trueconsole.log(reg.test("red")); // 没有匹配到,结果:false

字符组合:如果允许用户输入英文字母(不区分大小写)、数字、短横线-、下划线_的正则情况。

var reg = /^[a-zA-Z0-9_-]$/; 2.4 取反符

字符组合:当中括号“[]”与元字符“^”一起使用时,称为取反符。

示例:匹配除了小写字母a-z以外的其他字符

var rg = /^[^a-z]$/;console.log(rg.test("a")); // 结果为:falseconsole.log(rg.test("z")); // 结果为:falseconsole.log(rg.test("1")); // 结果为:trueconsole.log(rg.test("A")); // 结果为:true 3 量词符与括号字符 3.1 量词符

量词符:用来设定某个模式出现的次数。

字符说明示例结果?匹配?前面的字符零次或一次hi?t可匹配ht和hit+匹配+前面的字符一次或多次bre+ad可匹配范围从bread到bre…ad*匹配*前面的字符零次或多次ro*se可匹配范围从rse到ro…se{n}匹配{}前面的字符n次hit{2}er只能匹配hitter{n,}匹配{}前面的字符最少n次hit{2,}er可匹配范围从hitter到hitt…er

案例演示:

var reg = /^a*$/; // * 相当于>=0,可以出现0次或很多次var reg = /^a+$/; // + 相当于>=1,可以出现1次或很多次var reg = /^a?$/; // ? 相当于1||0,可以出现0次或1次var reg = /^a{3}$/; // {3}就是重复a字符3次var reg = /^a{3,}$/; // {3,}就是重复a字符 大于等于3次var reg = /^a{3,16}$/; // {3,16}就是重复a字符 大于等于3次 小于等于16次

案例演示:允许用户输入6-16位的用户名

var reg = /^[a-zA-Z0-9_-]$/;var reg = /^[a-zA-Z0-9_-]{6,16}$/; 3.2 括号字符

改变限定符的范围:

1、使用()符号前: 改变作用范围前,正则表达式:catch|er,可匹配的结果:catch、er; 2、使用()符号后: 改变作用范围后,正则表达式:cat(ch|er),可匹配的结果:catch、cater

分组:使用小括号可以进行分组,当小括号后面有量词符时,就表示对整个组进行操作。

1、使用()符号前: 正则表达式:abc{2},可匹配的结果:abcc 2、使用()分组后 正则表达式:cat(ch|er),可匹配的结果:catch、cater

1、使用()分组前 正则表达式:abc{2},可匹配的结果:abcc 2、使用()分组后 正则表达式: a(bc){2},可匹配的结果:abcbc

3.2 捕获与非捕获

捕获:使用小括号可以进行分组,当小括号后面有量词符时,就表示对整个组进行操作。

案例演示:

var res = "1234".match(/(\d)(\d)(\d)(\d)/);console.log(res);

案例演示:字符串内容位置替换。

var str = "Regular Capture";var reg = /(\w+)\s(\w+)/gi;var newstr = str.replace(reg, '$2 $1');console.log(newstr); // 输出结果为:Capture Regular

捕获与非捕获: (?:x)方式实现非捕获。

// 非捕获var reg = /(?:J)(?:S)/;var res = 'JS'.replace(reg, '$2 $1');console.log(res); // 输出结果:$2 $1// 捕获var reg = /(J)(S)/;var res = 'JS'.replace(reg, '$2 $1');console.log(res); // 输出结果:S J 3.2 贪婪与懒惰匹配

贪婪与懒惰匹配:所谓贪婪表示匹配尽可能多的字符,而惰性表示匹配尽可能少的字符。

懒惰匹配:正则匹配默认是贪婪匹配,通过 “?”符号实现惰性匹配。

var str = 'webWEBWebwEb';var reg1 = /w.*b/gi; // 贪婪匹配var reg2 = /w.*?b/gi; // 懒惰匹配// 输出结果为:["webWEBWebwEb", index: 0, input: "webWEBWebwEb"]console.log(reg1.exec(str));// 输出结果为:["web", index: 0, input: "webWEBWebwEb"]console.log(reg2.exec(str)); 3.2 反向引用、零宽断言

反向引用:获取存放在缓存区内的子表达式的捕获内容。

var str = '13335 12345 56668';var reg = /(\d)\1\1/gi;var match = str.match(reg);console.log(match); // 输出结果为:["333", "666"]

正向预查:

字符说明示例x(?=y)仅当x后面紧跟着y时,才匹配 xCountr(?=y|ies)用于匹配Country或Countries中的Countrx(?!y)仅当x后不紧跟着y时才匹配 x3.3 正则表达式优先级

正则表达式优先级:正则表达式各种符号的优先级,由高到低排列。

符号说明\转义符()、(?: )、(?=)、[]圆括号和中括号*、+、?、{n}、{n,}、{n,m}限定符^、$、\任何元字符、任何字符定位点和序列|“或”操作4 String类中的方法 4.1 match()方法

match()方法:根据正则匹配出所有符合要求的内容匹配成功后将其保存到数组中,匹配失败则返回false。

var str = "It's is the shorthand of it is";var reg1 = /it/gi;console.log(str.match(reg1)); // 匹配结果:["It", "it"]var reg2 = /^it/gi;console.log(str.match(reg2)); // 匹配结果:["It"]var reg3 = /s/gi;console.log(str.match(reg3)); // 匹配结果:["s", "s", "s", "s"]var reg4 = /s$/gi;console.log(str.match(reg4)); // 匹配结果:["s"] 4.2 search()方法

search()方法:search()方法可以返回指定模式的子串在字符串首次出现的位置,相对于indexOf()方法来说功能更强大。

var str = '123*abc.456';console.log(str.search('.*')); // 输出结果:0console.log(str.search(/[\.\*]/)); // 输出结果:3 4.3 split()方法

split()方法:split()方法用于根据指定的分隔符将一个字符串分割成字符串数组,其分割后的字符串数组中不包括分隔符。

案例演示:按照字符串中的“@”和“.”两种分隔符进行分割。

var str = 'test@123.com';var reg = /[@\.]/;var split_res = str.split(reg);console.log(split_res); // 输出结果:["test", "123", "com"]

案例演示:正则匹配方式分割字符串时,还可以指定字符串分割的次数。

var str = 'We are a family';var reg = /\s/;var split_res = str.split(reg, 2);console.log(split_res); // 输出结果:["We", "are"] 4.4 replace()方法

replace()方法:replace()方法用于替换字符串,用来操作的参数可以是一个字符串或正则表达式。

var str = 'Regular Capture';var reg = /(\w+)\s(\w+)/gi;var newstr = str.replace(reg, '$2 $1');console.log(newstr); // 输出结果为:Capture Regular 5 【案例】查找并替换敏感词

将中文字符和bad作为敏感词过滤掉。

<body style="display: flex;"> <div> <p>过滤前的内容:</p> <textarea id="pre" cols="30" rows="10"></textarea> <button id="btn">过滤</button> </div> <div> <p>过滤后的内容:</p> <textarea id="res" cols="30" rows="10"></textarea> </div> <script> // 给按钮绑定click事件 let btn = document.querySelector("#btn"); btn.addEventListener("click", function () { // 创建正则对象:定义敏感词 let reg = /(bad)|[\u4e00-\u9fa5]/gi; // 获取过滤前的内容 let pre_value = document.querySelector("#pre").value; // 用“*”替换敏感词 let res_value = pre_value.replace(reg, "*"); // 将过滤后的字符串放入textarea document.querySelector("#res").value = res_value; }) </script></body>

标签:
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消