商城项目开发全流程之正则表达式
in Projects with 0 comment

商城项目开发全流程之正则表达式

in Projects with 0 comment

5. 正则表达式

5.1 正则表达式的概念

正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。用我们自己的话来说: 正则表达式用来校验字符串是否满足一定的规则的公式

5.2 正则表达式的用途

5.3 正则表达式的语法

5.3.1 正则表达式的组成

正则表达式本身也是一个字符串,它由两种字符组成:

5.3.2 字符集合

语法格式 示例 说明
[字符列表] 正则表达式:[abc] 含义:目标字符串包含abc中的任何一个字符 目标字符串:plain 是否匹配:是 原因:plain中的“a”在列表“abc”中 目标字符串中任何一个字符出现在字符列表中就算匹配。
[^字符列表] [^abc] 含义:目标字符串包含abc以外的任何一个字符 目标字符串:plain 是否匹配:是 原因:plain中包含“p”、“l”、“i”、“n” 匹配字符列表中未包含的任意字符。
[字符范围] 正则表达式:[a-z] 含义:所有小写英文字符组成的字符列表 正则表达式:[A-Z] 含义:所有大写英文字符组成的字符列表 匹配指定范围内的任意字符。

5.3.3 元字符

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

代码 说明
. 匹配除换行字符以外的任意字符。
\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 匹配单词的开始或结束
^ 匹配字符串的开始,但在[]中使用表示取反
$ 匹配字符串的结束

5.3.4 出现次数

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

5.3.5 正则表达式使用体验

5.3.5.1 模式验证

注意:这里是使用正则表达式对象调用方法。

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式,返回结果true
console.log("/o/.test('Hello World!')="+reg.test(str));

5.3.5.2 匹配读取

注意:这里是使用字符串对象调用方法。

// 在目标字符串中查找匹配的字符,返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);

// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);

5.3.5.3 替换

注意:这里是使用字符串对象调用方法。

var newStr = str.replace(reg,'@');
// 只有第一个o被替换了,说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!

// 原字符串并没有变化,只是返回了一个新字符串
console.log("str="+str);//str=Hello World!

5.3.5.4 全文查找

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

// 目标字符串
var targetStr = 'Hello World!';

// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);

// 遍历数组,发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}

对比

// 目标字符串
var targetStr = 'Hello World!';

// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);

// 遍历数组,发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}

5.3.5.5 忽略大小写
//目标字符串
var targetStr = 'Hello WORLD!';

//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组,仅得到'o'
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}

对比

//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组,得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}

5.3.5.6 元字符使用
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // flase
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true
1234567
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // flase

5.3.5.7 字符集合的使用
//n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 : var reg=/^\d*$/;
var b = reg.test(targetStr);//true
12345
//数字+字母+下划线,6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true

5.4 常用正则表达式

需求 正则表达式
用户名 /^ [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]+$/

5.5 关于正则的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于正则表达式说明</title>
    <script>
        /* 1.定义正则表达式  通过new关键字 RegExp("正则表达式内容")   */

        /* 1.1 匹配是否有a字符*/
        let reg1 = new RegExp("a")

        /* 1.2 通过直接量的形式定义正则表达式 */
        let reg2 =  /a/


        /*
        *  2.1 根据正则判断是否有效
        */
        let reg3 = /o/
        let msg = "hello world"
        let flag = reg3.test(msg)
        alert(flag)

        /* 2.2 读取字符串中的内容 */
        let msg2 = "javA"
        //字符中是否包含efg    g:表示全文匹配  i:表示不区分大小写
        let reg = /[abc]/gi
        //当匹配到内容之后,返回新的数组结构
        let matchArray = msg2.match(reg)
        console.log(matchArray)

        /* 2.3 替换正则匹配的内容 */
        let reg4 = /[abc]/g
        let str4 = "qqaazz"
        //根据正则的内容替换数据,返回新的字符串
        let newStr = str4.replace(reg4,"k")
        alert(newStr)

        /* 3.关于正则的案例练习 */
        /* 3.1 要求密码中包含字母数字_ 并且至少8位*/
        //let passReg = /^[a-zA-Z0-9_]{8,}$/
        let passReg = /^\w{8,}$/
        let passMsg = "admin123!!!"
        alert("检查密码是否匹配:"+passReg.test(passMsg))

        /* 3.2 要求用户名包含字母和数字 6,20位*/
        let usernameReg = /^[a-zA-Z0-9]{6,20}$/

        /* 3.3 邮箱正则写法 */
        let emailReg = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/
        let eamilMsg = "abc@qqcom"
        alert("邮箱正则校验:"+emailReg.test(eamilMsg))

    </script>

</head>
<body>
</body>
</html>