JavaScript——正则表达式

## JavaScript学习笔记（三）——正则表达式

> + 正则表达式(Regular Expression)是一门独立的学科，Java语言支持、C语言支持、JavaScript中也支持；
> + 正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）；
>
> + 正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串；
>
> + 主要用在字符串格式匹配方面。

### 0x01 常见的正则表达式符号

**元字符**

+ `.`匹配换行符以外的任意字符

+ `\w`匹配字母或数字或下划线或汉字

+ `\s`匹配任意的空白字符

+ `/d`匹配数字

+ `\b`匹配单词的开始或结束

+ `^`匹配字符串的开始

+ `$`匹配字符串的结束

**限定符**

+ `*`重复两次或更多次
+ `+`重复一次或更多次
+ `?`重复零次或一次
+ `{n}`重复n次
+ `{n，}`重复n次或更多次
+ `{n，m}`重复n到m次

**反义代码**

+ `\W`匹配不是字母或数字或下划线或汉字

+ `\S`匹配任意不是空白字符的字符
+ `/D`匹配任意非数字的字符
+ `\B`匹配不是单词的开始或结束的位置
+ `^x`匹配除了x以外的任意字符
+ `^aeiou`匹配除了aeiou这几个字母以外的任意字符

正则表达式中的`()`优先级较高。

`[1,9]`表示1到9的任意1个数字（次数是1）

`[A-Za-z0-9]`表示A-Za-z0-9中的任意一个字符

`|`表示或者

### 0x02 创建正则表达式对象

在JavaScript中创建正则表达式的语法格式：

第一种方式：

```js
var regExp = /正则表达式/flags;
```

第二种方式：使用内置支持类RegExp

```js
var regExp = new RegExp("正则表达式","flags");
```

关于`flags`可以取的值：

+ `g`：全局匹配；
+ `i`：忽略大小写;
+ `m`：多行搜索（ES规范制定之后才支持），如果前面是正则表达式时不能使用`m`，只有当前面是普通字符串时才可以使用。

### 0x04 正则表达式的`test()`函数

正则表达式的`test()`函数的语法格式：

`正则表达式对象.test(用户填写的字符串)`

返回值为`true`时表示字符串匹配成功；

返回值为`false`时表示字符串匹配失败。

例如：验证邮箱是否合法

+ html代码

```html
<body>
<input type="text" id="email" />
<span id="emailError" style="color: red;font-size: 12px;"></span><hr>
<input type="button" id="mybt" value="验证" />
</body>
```

+ JavaScript代码

```js
window.onload = function() {
document.getElementById("mybt").onclick = function() {
var email = document.getElementById("email").value;
var emailRegExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
var ok = emailRegExp.test(email);
if(!ok) {
document.getElementById("emailError").innerText="邮箱地址不合法！";
} else {
document.getElementById("emailError").innerHTML="<font color='green' size=3px>√</font>"
}
}
document.getElementById("email").onfocus = function() {
document.getElementById("emailError").innerText = "";
}
}
```

当邮箱格式正确时，会提示<font color = green>√</font>；当邮箱格式错误时会提示<font color = red>邮箱地址不合法!</font>

### 0x03 去除字符串前后空白

利用`trim()`函数可以去除字符串前后空白，例如：

+ html代码

```html
<body>
<input type="text" id="username" />
<input type="button" id="mybt" value="获取用户名" />
</body>
```

+ JavaScript代码

```js
window.onload = function() {
document.getElementById("mybt").onclick = function() {
var username = document.getElementById("username").value.trim();//去除前后空白
alert("--->" + username + "<---")
}
}
```

当在文本框输入`zhan g s an`时，会弹出`--->zhangsan<---`，可以去除字符串的空白。

---

by xiaoxin_zh

2022.4.19