html 中的正则(基础)
正则表达式:
(1). 什么是: 正则表达式就是专门规定一个字符串中字符出现的规律的一套规则。
(2). 何时: 2大类场景
a. 验证字符串格式
b. 查找敏感词
如何在js中创建正则表达式，用于查找和匹配: 2种:
(1). 标准写法:
a. var 变量=new RegExp("正则表达式", "ig")
创建
正则表达式类型的对象
"i" - 忽略大小写
"g"- 全部
b. 何时: 今后只要正则表达式不是固定的，需要根据其他变量值和数组内容动态生成，只能用new RegExp()
(2). 简写:
js地盘 | 正则地盘| js地盘
a. var 变量=/ 正则 /ig ，其实就是new RegExp的简写。
b. 问题: //之中是正则表达式的地盘，只能写正则表达式的语法。不认识js的任何语法！
c. 解决:
1). 只有写死的正则表达式，才能用//创建。
比如: 手机号, 身份证号, 邮箱...
2). 如果正则表达式不是固定的！需要根据其他的变量或数组动态生成！只能用第一种方式拼接字符串！
示例: 查找字符串中符合要求的敏感词
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 var str="老师:请用小红 我的 朋友造句。小亮:小红是我的朋友。小然:朋友！小红是我的！"; 11 //要求: 找出这句话中所有以小字开头的人的名字:小红或小然或小亮 12 //先创建一个正则表达式，包含要找的所有人名 13 //标准写法: 14 // 或 或 15 // var reg=new RegExp("小红|小然|小亮","g"); 16 //找所有 17 //简写: 18 // var reg=/小红|小然|小亮/g; 19 20 //用正则查找敏感词 21 // var arr=str.match(reg); 22 23 //如果正则表达式只用一次，不会重复使用 24 //以上两句可合并为一句 25 var arr=str.match(/小红|小然|小亮/g); 26 console.log(arr); 27 </script> 28 </body> 29 </html> 30 运行结果: 31 ["小红", "小亮", "小红", "小然", "小红"]
示例: 动态替换字符串中规定的敏感词:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 //有一个数组集中保存要查找的所有敏感词，而且，要查找的敏感词列表可能随时代不同不断变化。 11 var arr1=["明月","青天"]; 12 console.log(arr1.join("|")); 13 14 //希望数组里有什么，就将什么替换为** 15 //先定义正则表达式 16 //错误: //之间不认识js语法 17 // var reg=/arr1.join("|")/g; 18 //正确: 19 var reg=new RegExp(arr1.join("|"),"g"); 20 //先有一个字符串: 21 var str="日照香炉生紫烟; 窗前明月光; 一行白鹭上青天"; 22 //用正则表达式替换字符串中所有符合要求的敏感词为** 23 var str=str.replace(reg,"**"); 24 //输出替换后的新字符串 25 console.log(str); 26 </script> 27 </body> 28 </html> 29 运行结果: 30 明月|青天 31 日照香炉生紫烟; 窗前**光; 一行白鹭上**
验证:
(1). 什么是: 用正则表达式检查一个字符串的格式是否符合要求
(2). 如何:
a. var 验证结果=正则表达式对象.test(要检查的字符串)
b. 返回值:
1). 如果要检查的字符串格式符合正则表达式要求，则返回true
2). 如果要检查的字符串格式不符合正则表达式要求，则返回false
(3). 坑: test管的很松，只要字符串中包含部分内容和正则表达式匹配，就返回true。而不要求必须从头到尾完全匹配！
比如: /\d{6}/.test("abc123456def") 返回 true
"abcdef123456" 返回 true
(4). 解决: 只要验证格式，都在正则//内，前加^，后加$
(5). 原理: ^表示字符串开头， $表示字符串结尾
^和$一起使用，就有"必须从头到尾完全匹配"的意思
示例: 验证密码格式必须是6位数字
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 //请用户输入一个密码 11 var pwd=prompt("请输入密码"); 12 //定义正则表达式规定密码必须是6位数字 13 //回顾正则: 14 //1位数字: \d digit 数字 15 //6位: {6} 16 var reg=/^\d{6}$/; 17 // 用正则表达式 检查用户输入的字符串 18 var result=reg.test(pwd); 19 //如果验证通过 20 if(result==true){ 21 //在控制台输出密码格式正确 22 console.log(`密码格式正确`) 23 }else{//否则 24 //在控制台输出密码格式不正确 25 console.error(`密码格式不正确`) 26 } 27 </script> 28 </body> 29 </html>
既查找每个敏感词的内容，又查找每个敏感词的位置:
(1). 问题: match最大的问题是只能获得敏感词的内容，无法获得敏感词的位置！
(2). 解决: 只要既想获得敏感词内容，又想获得敏感词位置，都用正则表达式对象的exec()函数
(3). 如何: var 查找结果=正则表达式对象.exec(包含敏感词的字符串);
(4). 强调: 如果想让exec()找所有敏感词，那么正则表达式对象必须加g
(6). 坑: 如果只调用一次exec()，即使正则表达式加了g，也只能返回一个敏感词的内容和位置。无法找到所有敏感词的内容个位置的！
(7). 解决: 只要希望exec()可以查找到所有敏感词的内容和敏感词的位置，必须反复调用exec()——exec()自动去找下一个敏感词，直到找不到,返回null为止。
(8). 固定套路:
var reg=/正则表达式/g;
do{
var result=reg.exec(str);
console.log(result)
}while(result!=null); //只有本次找到了敏感词(result!=null)时才有必要继续找下一个！
(8). exec()的返回值:
a. 如果找到了一个敏感词:
内容 下标位置
var result=[
0: "小红",
index: 5
]
1). 如果想获得结果中的敏感词内容:
标准: result["0"] 简写: result[0]
2). 如果想获得结果中敏感词的位置:
标准: result["index"] 简写: result.index
b. 如果没找到敏感词: null
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var str="老师:请用小红 我的 朋友造句。小亮:小红是我的朋友。小然:朋友！小红是我的！"; //要求: 找出这句话中所有以小字开头的人的名字和下标位置:小红或小然或小亮 //先定义正则表达式 var reg=/小红|小亮|小然/g; //for while do while //因为当拿到一个字符串时，我们无法提前预见到是否包含敏感词！所以，应该无论是否包含敏感词都能至少查找一次才行！ do{ // 用正则 查找 str中的敏感词 var result=reg.exec(str); // console.log(result); //先验证只有本次找到的结果不是null时，才读取结果中的下标位置和敏感词内容 if(result!==null){ //标准: // console.log(`在${result["index"]}位置，找到敏感词${result["0"]}`); //简写: console.log(`在${result.index}位置，找到敏感词${result[0]}`); } }while(result!=null); //只有本次找到了敏感词，才有必要继续找下一个！ </script> </body> </html> 运行结果: 在5位置，找到敏感词小红 在16位置，找到敏感词小亮 在19位置，找到敏感词小红 在27位置，找到敏感词小然 在33位置，找到敏感词小红
浙公网安备 33010602011771号