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 ["小红", "小亮", "小红", "小然", "小红"]
View Code

示例: 动态替换字符串中规定的敏感词:

 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 日照香炉生紫烟; 窗前**光; 一行白鹭上**
View Code

验证: 

(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>
View Code

既查找每个敏感词的内容,又查找每个敏感词的位置: 

(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位置,找到敏感词小红
View Code
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a small tree

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值