JavaScript学习笔记(八)(正则表达式)

最新推荐文章于 2022-03-28 19:34:25 发布

月色夜雨

最新推荐文章于 2022-03-28 19:34:25 发布

阅读量98

点赞数

分类专栏： # JavaScript 文章标签：正则表达式

本文链接：https://blog.csdn.net/qq_47267252/article/details/119629548

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

正则表达式

正则表达式（Regular Expression）是一个描述字符模式的对象

目前正则表达式的主要作用：

（1）用来在客户端验证输入的数据（一个严谨项目需要由客户单验证和服务端验证）

（2）常用于做爬虫网页信息使用

一、正表达式对象的创建

前言：JavaScript语言中正则表达式的创建（实际上，不同的编程语言支持的正则表达式都是一样，不一样的地方可能在创建方面不同）

创建方式:

直接量的方式
创建RegExp对象的方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            //1.直接量方式
            /* /表达式/属性:
            *    /pattern/attributes
            */
            let r1 = /aaaa/g;
            console.log(r1);
            //2.创建RegExp对象
            /*
            *    new RegExp("表达式","属性")
            */
            let r2 = new RegExp("bbbb","g");
            console.log(r2);
        </script>
    </body>
</html>

在这里插入图片描述
attributes的取值：

g:全局匹配
i:忽略大小写
m:多行匹配

二、字符串对象支持正则表达式的方法

（1）`search`:

字符串中指定的子字符串或者检索的正则表达式相匹配的字符串，存在返回第一次出现的索引，没有返回-1（不支持全局匹配）

 <script>
          let str = "love you LOVE YOU";
          console.log(str.search(/LOVE/));//9
          console.log("忽略大小写"+str.search(/LOVE/i));//0
          console.log(str.search("love"));//0
          console.log("没有匹配的返回-1"+str.search(/me/));//-1
        </script>

（2）`match`:

字符串中指定子字符串或者检索的正则表达式相匹配的数据，如果匹配成功,返回值是一个数组，它可以设置全局匹配（数组中包含三个元素，第一个元素的存放的匹配文本，第二个index属性的位置、input属性声明的是对象引用）.如果没有,返回null

  <script>
          let str = "love you LOVE YOU";
          console.log(str.match(/LOVE/));
          console.log(str.match(/LOVE/i));
          console.log(str.match(/LOVE/ig));
          console.log(str.match(/me/));

          let s = "1 plus 24 equals 3";
          console.log(s.match(/[0-9]/));//未全局匹配,只出现1
          console.log(s.match(/[0-9]/g));//出现四个
          console.log(s.match(/[0-9]+/g));//+:连续匹配,出现三个

        </script>

在这里插入图片描述

（3）`replace`：

替换方法，返回值新的字符串

  let str = "love you LOVE YOU";
            let s1 = str.replace("you","me");
            console.log(s1);
            let s2 = str.replace(/you/ig,"me");
            console.log(s2);

            let name = "hello I am a chinese people";
            let regexp = /am/g;
            if(regexp.test(name)){
                /*了解一下就可以！RegExp对象：一些静态属性*/
                console.log(RegExp['$&']);//最后一个匹配的字符串
                console.log(RegExp["$'"]);//最后一个匹配的字符串后的字符串
                console.log(RegExp["$`"]);//最后一个匹配的字符串前的字符串
                console.log(RegExp["$+"]);
                console.log(RegExp["$_"]);

            }

在这里插入图片描述

（4）`split`:

分割字符串，返回的数组

let str = "what are you doing?";
console.log(str.split(" "));
console.log(str.split(""));

str = "what   are \t you \n doing?";
console.log(str);
console.log(str.split(/\s+/g));//\s代表一些空格操作,+代表出现一次以上

在这里插入图片描述

三、RegExp对象方法

（1）`test`:

常常使用，用于检测一个字符串是否匹配某一个模式（正则表达式）

  let str = "very love me";
            console.log(/love/.test(str))
            console.log(/^love/.test(str))//"^"代表从第一位开始匹配:必须以"love"开头=====>true
            console.log(/me$/.test(str))//"$":必须以"me"结尾=====>true
            console.log(/love$/.test(str))//=====>false
            console.log(/^love$/.test(str))//以"love"开头结尾=====>false

（2）`exec`:

检测字符串中正则表达式匹配，返回的是数组

\d代表[0-9]

let s = "plus 24 equals 3";
console.log(/\d+/.exec(s));

在这里插入图片描述

四、正则表达式说明

（1）普通字符：

字母、数字、下划线、汉字以及一些没有特殊定义的标点符号，都属于普通字符

（2）`()`、`[]`和`|`的含义

/*(blue|red|yellow):查找小括号中的任意的一项，|代表或者的意思*/
/*[bcd][bcd]：代表两位只有组合，只要匹配即可 bb,bc,bd,cb,cc,cd,db,dc,dd*/
let str = "abcdefabcdef";
console.log(str.match(/(ab|ef)/g));
console.log(str.match(/([abef][efba])/g));

（3）正则表达式中元字符

.：匹配除换行符以外的任意字符
[A-Za-z0-9]：匹配括号中的字符集中的任意字符
[^A-Za-z0-9]：匹配不在括号中的字符集中的任意字符
\d：匹配数字[0-9]
\D：匹配非数字[^0-9]
\w：匹配字母、数字、下划线[A-Za-z0-9_]
\W：匹配非字母、数字、下划线[^A-Za-z0-9_]
\s：匹配空白字符、空格、制表符和换行符
\S：匹配非空白字符

\O：匹配null字符
\b：匹配空格字符
\f：匹配制表字符
\n：匹配换行字符
\r：匹配回车字符

（4）`^`行首匹配和`$`行尾匹配，如果遇到特殊字符需要使用`\`转义

五. 匹配模式(贪婪模式和非贪婪模式)

被量词修饰的子表达式的匹配行为
贪婪模式在整个表达式匹配成功的情况下尽量多的匹配
非贪婪模式在整个表达式匹配成的前提下尽量少的匹配
（1）贪婪模式的量词
+：重复1~N次
?：重复0~1次
*：重复0~N次
{n}：必须重复N次
{n,}：至少重复N~无穷
{n,m}：重复n~m次

 let str = "love you<p>星河</p>孤帆远影<p>天空</p>very";
            //贪婪模式
            console.log(str.match(/<p>.*<\/p>/));
            //非贪婪匹配
            console.log(str.match(/<p>.*?<\/p>/));

在这里插入图片描述

六. 案例

1.手机号验证

 console.log("1.验证手机号码");
           let reg = /^1[3456789]\d{9}$/;
           console.log(reg.test("155968476324"))//超出位数
           console.log(reg.test("12596847634"))//不支持开头12的号码
           console.log(reg.test("15946123456"))//true

2.邮箱验证

 console.log("2.验证邮箱");
           reg = /^[a-zA-Z0-9_-]+@+\w+(\.\w+)+$/;//连接处必须要有"+"
           console.log(reg.test("123.53456.123"));
           console.log(reg.test("klda_dsf@163.com"));
           console.log(reg.test("klda_dsf@163.com.cn"));

3.账号规则

 console.log("3.账号规则");
           reg = /^[a-zA-Z]\w{4,15}$/;
           console.log(reg.test("123sad"));//不支持数字开头
           console.log(reg.test("sad"));//账号少于5位
           console.log(reg.test("sakjfdksafj"));//true

4.简单身份证验证

console.log("4.简单的身份证验证");
           reg = /^\d{17}(\d|[Xx])$/;

5.日期验证

console.log("5.日期验证");
           reg = /^\d{4}[-.\/]\d{1,2}[-.\/]\d{1,2}$/;

6.简单爬网址

 console.log("6.简单爬网址")
           let content = "<div><a href=\"http://www.baidu.com\">百度一下</a></div><div><a href=\"http://www.biying.com\">必应搜索</a></div> <div><a href=\"http://www.4399.com\">4399小游戏</a></div><p>给我死来</p>";
           reg = /<a\s+href=["']http:\/\/.*?["']>.+?<\/a>/gi;
           console.log(content.match(reg));

在这里插入图片描述

月色夜雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记(八)(正则表达式)

JavaScript学习笔记(八）　正则表达式一、正表达式对象的创建二、字符串对象支持正则表达式的方法（1）`search`:（2）`match`:（3）`replace`：（4）`split`:三、RegExp对象方法（1）`test`:（2）`exec`:四、正则表达式说明（1）普通字符：（2）`()`、`[]`和`|`的含义（3）正则表达式中元字符（4）`^`行首匹配和`$`行尾匹配，如果遇到特殊字符需要使用`\`转义五. 匹配模式(贪婪模式和非贪婪模式)六. 案例1.手机号验证2.邮箱验证3.账号规
复制链接

扫一扫