随着互联网的发展,JavaScript已经成为了一门非常重要的编程语言,它在前端开发中扮演着极其重要的角色。而在JavaScript中,正则表达式也是一个非常重要的概念。掌握js正则表达式,可以让你的代码更加精准匹配!
一、什么是正则表达式?
正则表达式,又称为“正则式”、“规则表达式”、“ReEx”等,是一个用来匹配字符串中字符组合的模式,可以用于搜索、替换和分割字符串等常见操作。在许多编程语言和软件中都有正则表达式的实现,包括JavaScript。
二、js正则表达式语法
JS正则表达式中的“元字符”是有特殊含义的,它们经由“\”字符进行转义后,可以构成各种组合的“规则”,即“正则表达式”。
我们来看一下最简单的正则表达式:
```
/abc/
```
这条正则表达式有三个字符,“/”是起始标志,“/”是结束标志,“abc”是匹配的子串。这个正则表达式可以匹配“abc”字符串。
我们再来看一下正则表达式的其他语法:
| 基本语法 | 含义| 例子|
| -------- | -------------------------- | ------------- |
| .| 匹配任意一个字符| /沙漏./|
| ^| 匹配字符串的开始| /^沙漏/|
| $| 匹配字符串的结束| /沙漏$/|
| *| 匹配前一个字符0次或者多次 | /soin*/|
| +| 匹配前一个字符1次或者多次 | /soin+/|
| ?| 匹配前一个字符0次或者1次 | /aabb?cd/|
| []| 匹配括号内任意一个字符| /[if]love/ |
| [^]| 匹配不在括号内的任意字符 | /[^if]love/ |
| ()| 将包含的字符串作为一个元素 | /(soin)+/|
| \|| 匹配左右两边的任意一个字符 | /soin\|sand/ |
| {}| 前一个字符匹配的次数| a{2}|
三、js正则表达式的方法
有了正则表达式,我们可以通过各种方法对字符串进行匹配和操作。在JavaScript中,常见的对字符串进行匹配和操作的方法如下:
1. search()方法
search()方法即字符串内置方法,用于寻找字符串中与正则表达式匹配的子串索引值,如果找不到,则返回-1。
```
var str="abccdef";
var patt=/cde/;
console.log(str.search(patt)); // 输出2
```
2. test()方法
test()方法用于检测字符串中是否存在满足正则表达式的子串,如果有则返回true,否则返回false。
```
var str="abccdef";
var patt=/cde/;
console.log(patt.test(str)); // 输出true
```
3. exec()方法
exec()方法是正则表达式的方法。它用于检索字符串中满足正则表达式的子串,如果找到了匹配子串,则返回一个数组,否则返回null。
```
var str="abccdef";
var patt=/cde/;
console.log(patt.exec(str)); // 输出["cde"]
```
4. match()方法
match()方法也是字符串的方法,它用于检索字符串中与正则表达式匹配的子串,并返回一个数组,如果没有找到,则返回null。
```
var str="abccdef";
var patt=/cde/;
console.log(str.match(patt)); // 输出["cde"]
```
5. replace()方法
replace()方法用于在字符串中用一些字符替换与正则表达式匹配的子串,并返回一个新的字符串。
```
var str="abccdef";
var patt=/c/g;
console.log(str.replace(patt,"Z")); // 输出abZZdef
```
注:上面的例子中用“Z”字符替换了所有的“c”字符,这里使用的是“g”元字符,表示全局匹配。
四、应用举例
1. 检测URL是否合法
在Web开发中,经常需要检测一个URL是否合法。下面是一个通过正则表达式检测URL合法性的例子:
```
function checkUrl(str_url){
var expression=/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?$/;
var regex= new RegExp(expression);
return regex.test(str_url);
console.log(checkUrl("http://www.baidu.com")); // 输出true
console.log(checkUrl("https://www.baidu.com")); // 输出true
console.log(checkUrl("www.baidu.com"));// 输出false
console.log(checkUrl("http:/www.baidu.com")); // 输出false
```
2. 替换字符串中的所有空格
使用正则表达式可以非常方便地获得字符串中某种类型的子串,然后根据需求对其进行替换等操作。下面的例子演示了如何把字符串中的所有空格全部替换为“-”。
```
var str="iPhone 8 plus X max";
var patt=/ /g;
console.log(str.replace(patt,"-")); // 输出iPhone-8-plus-X-max
```
3. 检测输入的字符是否是合法的数字
在Web开发中,常常需要检测用户输入的是否是数字类型。下面的例子演示了如何检测输入是否是数字类型。
```
function checkTel(str_num){
var patt= /^[0-9]*$/;
return patt.test(str_num);
console.log(checkTel("18912345678")); // 输出true
console.log(checkTel("A18912345678")); // 输出false
```
五、js正则表达式的应用场景
1. 表单验证
在前端开发中,表单是一个非常重要的页面元素。为了保证用户输入信息的格式正确,一般会在进行表单提交之前进行一系列的验证。而js正则表达式的应用,能够对输入的信息进行一定的规范标准化,避免用户开发出现各种不规范情况。比如:
- 根据邮箱格式合法性验证输入账号是否合法。
- 根据电话号码规则合法性验证输入号码是否合法。
- 根据密码规则(大小写加数字等)合法性验证输入密码是否合法。
2. 提取文本中的信息
在大量文本中提取有价值的信息是算法、机器学习等领域的核心任务。JS正则表达式利用强大的通用字符描述规则提取文本中的有价值信息是非常有效的方法。比如:
- 在变更日志中提取修改工单的编号。
- 在大量文档中提取重要人物的名字与职位。
- 在下载地址中提取文件名与后缀。
3. 事件处理
网站中有很多用户与浏览器交互的场景,其中捕获事件并处理是非常重要的一环节,正则表达式也经常用于条件处理。比如:
- 根据关键字在文档中找到合适的内容。
- 根据人名在历史日志中定位事件位置。
六、小结
JS正则表达式是一个非常重要的概念,它能够帮助开发者更加方便地对字符串进行匹配和操作。在学习JS正则表达式时,我们需要重点掌握其语法和方法,同时还需要通过应用场景进行实践,这样才能真正掌握JS正则表达式的精髓。希望本文能够对初学者了解JS正则表达式提供一些帮助。