零基础入门JavaWeb——正则表达式

程序员丶星霖

于 2022-12-04 08:30:00 发布

阅读量829

点赞数 1

分类专栏：前端技术文章标签：正则表达式 javascript 前端

本文链接：https://blog.csdn.net/HunterArley/article/details/128146718

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、概述

正则表达式是对字符串操作的一种逻辑公示，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

二、正则表达式的用途

正则表达式有三个主要用途：

模式验证：检测某个字符串是否符合规则，例如检测手机号、身份证号等等是否符合规范
匹配读取：将目标字符串中满足规则的部分读取出来，例如将整段文本中的邮箱地址读取出来。
匹配替换：将目标字符串中满足标准的部分替换为其他字符串，例如将整段文本中的“hello”替换成“haha”。

三、正则表达式的语法

3.1 创建正则表达式对象

对象形式：var reg = new RegExp("正则表达式") 当正则表达式中有"/"时使用这种形式。
直接量形式：var reg = /正则表达式/ 一般使用这种声明方式

3.2 正则表达式入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的入门</title>
</head>
<body>
<script>
    // 匹配验证：校验一个字符串中是否包含'o'字母

    var str ="hello worLd"
    // 1. 编写一个用于校验的正则表达式
    var reg1 = /o/
    // 2. 使用正则表达式去校验字符串
    var result = reg1.test(str);
    console.log(result)

    // 匹配读取：读取一个字符串中的第一个'l'字母
    // g表示全文查找，如果不使用g就只能查找到第一个匹配的内容
    // i表示ignore忽略大小写，如果不使用i就表示精确区分大小写，加了i就不区分大小写
    // 1. 编写一个正则表达式
    var reg2 = /l/gi
    // 2. 使用正则表达式读取字符串
    var array = str.match(reg2)
    console.log(array.length)

    // 匹配替换：将一个字符串中的第一个'o'字母替换成'@'
    var newStr = str.replace(reg1,'@');
    console.log(newStr)

</script>
</body>
</html>

3.3 正则表达式的匹配模式

3.3.1 全文查找

如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。

    // 匹配读取：读取一个字符串中的第一个'l'字母
    // g表示全文查找，如果不使用g就只能查找到第一个匹配的内容
    // 1. 编写一个正则表达式
    var reg2 = /l/g
    // 2. 使用正则表达式读取字符串
    var array = str.match(reg2)
    console.log(array.length)

3.3.2 忽略大小写

    // 匹配读取：读取一个字符串中的第一个'l'字母
    // i表示ignore忽略大小写，如果不使用i就表示精确区分大小写，加了i就不区分大小写
    // 1. 编写一个正则表达式
    var reg2 = /l/i
    // 2. 使用正则表达式读取字符串
    var array = str.match(reg2)
    console.log(array.length)

3.3.3 模糊匹配和精确匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精确匹配和模糊匹配</title>
</head>
<body>
<script>
    var str = "hello world";
    // 字符串是否包含'l'
    var reg1 = /l/
    console.log(reg1.test(str))

    // 字符串是否以l结尾
    var reg2 = /l$/
    console.log(reg2.test(str))

    // 字符串是否以l开头
    var reg3 = /^h/
    console.log(reg3.test(str))

    // 判断一个字符串是否包含11个字符
    var reg4 = /^[a-zA-Z]{11}$/
    console.log(reg4.test(str))

</script>
</body>
</html>

3.3.4 多行查找

不使用多行查找模式，目标字符串中不管有没有换行符都会被当做一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行查找</title>
</head>
<body>
<script>
    // 多行查找：如果没有多行查找。字符串无论是多少行，都会被当成一行匹配
    var str1 = "hello\nworld!"
    var str2 = "hello"

    // 匹配字符串是否以hello结尾
    // m表示多行查找
    var reg = /hello$/m
    console.log(reg.test(str1))
    console.log(reg.test(str2))
</script>
</body>
</html>

3.4 元字符

在正则表达式中被赋予特殊含义的字符，不能被直接当做普通字符使用。如果要匹配元字符本身，需要对元字符进行转义，转义的方式是在元字符前面加上“\”。

3.4.1 常用的元字符

代码	说明
.	匹配除换行字符以外的任意字符。
\w	匹配字母或数字或下划线等价于`[a-zA-Z0-9_]`
\W	匹配任何非单词字符。等价于`[^a-zA-Z0-9_]`
\s	匹配任意的空白符，包括空格、制表符、换页符等等。等价于`[\f\n\r\t\v]`
\S	匹配任何非空白字符。等价于`[^\f\n\r\t\v]`
\d	匹配数字。等价于`[0-9]`
\D	匹配一个非数字字符。等价于`[^0-9]`
\b	匹配单词的开始或结束
^	匹配字符串的开始，但在[]中使用表示取反
$	匹配字符串的结束

3.4.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
<script>
    var str = "one two three four"
    // 匹配全部空格：就是匹配空白符
    var reg1 = /\s/g

    // 将空白符替换为@
    var result= str.replace(reg1,'@');
    console.log(result)


    var str2 = "今年是2014年"
    // 匹配至少一个数字：判断str中是否包含数字
    var reg2 = /\d{4}/
    // 将数字替换成'abcd'
    var newStr2 = str2.replace(reg2,'abcd');
    console.log(newStr2)

    var str3 = "I love Java"
    var str4 = "Java love me"
    // 匹配以Java开头
    var reg3 = /^Java/
    console.log(reg3.test(str3))
    console.log(reg3.test(str4))

    // 匹配以Java结尾
    var reg4 = /Java$/
    console.log(reg4.test(str3))
    console.log(reg4.test(str4))
</script>
</body>
</html>

3.5 字符集合

语法格式	示例	说明
`[字符列表]`	`[abc]`	目标字符串中任何一个字符出现在字符列表中就算匹配成功。
`[^字符列表]`	`[^abc]`	匹配字符列表中未包含的任意字符。
`[字符范围]`	[a-z]	匹配指定范围内的任意字符。

var str01 = 'Hello World';
var str02 = 'I am Tom';
//匹配abc中的任何一个
var reg = /[abc]/g;
console.log('reg.test(str01)='+reg.test(str01));
console.log('reg.test(str02)='+reg.test(str02));

3.6 出现次数

代码	说明
*	出现零次或多次
+	出现一次或多次
?	出现零次或一次
{n}	出现n次
{n,}	出现n次或多次
{n,m}	出现n到m次

console.log("/[q]{3}/.test('qq')="+/[q]{3}/g.test('qq')); // flase
console.log("/[q]{3}/.test('qqq')="+/[q]{3}/g.test('qqq')); // true
console.log("/[q]{3}/.test('qqqq')="+/[q]{3}/g.test('qqqq')); // true

3.7 在正则表达式中表达“或”

使用符号：“|”

// 目标字符串
var str01 = 'Hello World!';
var str02 = 'I love Java';
// 匹配'World'或'Java'
var reg = /World|Java/g;
console.log("str01.match(reg)[0]="+str01.match(reg)[0]);
console.log("str02.match(reg)[0]="+str02.match(reg)[0]);

3.8 常用正则表达式

需求	正则表达式
用户名	`/^\[a-zA-Z\_][a-zA-Z_\-0-9]{5,9}$/`
密码	`/^[a-zA-Z0-9_\-\@\#\&\*]{6,12}$/`
前后空格	`/^\s+\|\s+$/g`
电子邮箱	`/^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/`