从0开始学web-day26-js08

最新推荐文章于 2024-05-12 12:05:38 发布

oxygen_ls

最新推荐文章于 2024-05-12 12:05:38 发布

阅读量547

点赞数

分类专栏：前端 # js 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122843407

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

本文详细介绍了正则表达式的概念、使用方法和常见操作，包括正则的定义、正则与字符串的方法（如split、match、search、replace）、正则的修饰符（如i、m、g）、字符集、边界、预定义类、量词以及分组。通过实例展示了正则在表单验证、字符串匹配和替换等场景中的应用。

摘要由CSDN通过智能技术生成

1.复习
day26复习-js08
2.正则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        正则是做字符串匹配验证，主要应用与表单验证
        如何定义正则 /规则/

     -->
</body>
<Script>
    var str = "abc";
    // 定义正则
    var reg = /a/;
    // exec() 首次匹配字符串所在的下标 以数组的形式返回 如果没有匹配的字符串返回null
    console.log(reg.exec(str));
    console.log(reg.test(str));
    // test() 存在对应字符串返回true 不存在返回false
</Script>
</html>

3.正则与字符串的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // split将字符串转换成数组
    var str = "ab ca";
    // 字符串写法
    console.log(str.split(" "));
    // 正则写法
    console.log(str.split(/ /));

    // match 查找匹配的字符串 返回首次出现位置的下标 以数组形式 如果不存在返回null
    console.log(str.match("a"));
    console.log(str.match(/s/));

    // search() 查找匹配字符串 返回首次出现位置的下标 如果没有返回-1
    console.log(str.search("a"));
    console.log(str.search(/a/));

    // replace 查找替换 替换第一次出现的位置 第一个参数是要查找的字符串 第二个是用什么替换
    // 第二个参数还可以写一个函数 函数的返回值就是你要替换成的内容
    console.log(str.replace("a","123"));
    console.log(str.replace(/a/,"123"));

    console.log(str.replace("a",function(){return "www"}));
    console.log(str.replace(/a/,function(){return "www"}));
</script>
</html>

4.正则相关内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        正则的组成：普通字符 特色字符
        普通字符： 数字 字母 下划线
        特殊字符：() [] \ / | $ ^ . + ?
     -->
</body>
<script>
    var str = "abc";
   /* // 必须一一对应 顺序不能颠倒
    console.log(/ab/.test(str));//true
    console.log(/ba/.test(str));//false

    // 有意义的特殊字符需要\转义 必须存在转义的反斜杠
    var str = "a\nbc";
    var str1 = "ab\cd";
    console.log(str);
    console.log(str1);
    console.log(/a\n/.test(str));//true
    console.log(/n/.test(str));//false
    console.log(/\n/.test(str));//false
    console.log(/\c/.test(str1));//false
    console.log(/c/.test(str1));//true*/

    //正则的修饰符 img 
    //i 不区分大小写
    //$以a结尾
    console.log(/a/.test("Abc"));//false
    console.log(/A/.test("Abc"));//true
    console.log(/a/i.test("Abc"));//true
    // m多行匹配
    console.log(/a$/.test("a\nbc"));//false
    console.log(/a$/m.test("a\nbc"));//true
    // g 全局匹配 
    // 如果直接写正则.方法 添加g和不添加没有任何区别 如果单独创建正则规则 添加g之后 每次都进行匹配 全部匹配完成之后是null 出现null再次匹配会从头开始匹配
    console.log(/a/.exec("abca"));
    console.log(/a/g.exec("abca"));

    var str = "abca";
    var reg = /a/g;
    console.log(reg.exec(str));//0
    console.log(reg.exec(str));//3
    console.log(reg.exec(str));//null

</script>
</html>

5.字符集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 字符集相当于一个区间 只要存在在这个区间就可以
    // 区间用中括号定义 []
    console.log(/[0,1,2,3,4,5,6,7,8,9]/.test("123"));//ttrue
    console.log(/0,1,2,3,4,5,6,7,8,9/.test("123"));//false
    // 数字
    console.log(/[0-9]/.test("abc"));//false
    console.log(/[0-9]/.test("123"));//true
    console.log(/[0-9]/.test("12a3"));//true

    // 字母
    console.log(/[a-z]/.test("123"));//false
    console.log(/[a-z]/.test("abc"));//true
    console.log(/[a-z]/.test("ABC"));//false
    console.log(/[A-Z]/.test("ABC"));//true

    console.log(/[a-f0-9]/.test("ab12cd"));//true
    console.log(/[a-f0-9]/.test("ab12cx"));//true
    console.log(/[a-f]/.test("x"));//false
    // ^ $ 边界词
    console.log(/^[a-f0-9]$/.test("ab12cx"));//false
    //console.log(/[a-Z/.test("a"));//报错
    console.log(/[a-zA-Z]/.test("a"));//大小写都包含
    console.log(/[A-z]/.test("Xd"));//大小写都包含

    // 负向类 取反
    console.log(/[0-9]/.test("1"));//true
    console.log(/[^0-9]/.test("1"));//false
    console.log(/[^0-9]/.test("z"));//true


</script>
</html>

6.边界

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    console.log(/[0-9]/.test("12"));//true
    //^以xxx开头
    console.log(/^[0-9]/.test("12jifh"));//数字开头 true
    console.log(/^[0-9]/.test("ijj12jifh"));//不是数字开头 包含数字 false
    //$以xxx结尾
    console.log(/[0-9]$/.test("xx123"));//true
    console.log(/[0-9]$/.test("123aa"));//false
    // \b 单词边界 写在前边代表 以这个单词开头 写在后边代表以这个单词结尾
    console.log(/he\b/.test("abche"));//true
    console.log(/he\b/.test("heabc"));//false 必须以he结尾
    console.log(/\bhe/.test("heabc"));//false 必须以he开头
    console.log(/\bhe/.test("abche"));//true

    // \B 非单词边界
    console.log(/he\B/.test("abchecba"));//不是开头也不是结尾位置 true
    console.log(/he\B/.test("abche"));//false
</script>
</html>

7.预定义类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // \d数字 [0-9]
    console.log(/\d/.test("1abc"));//true
    console.log(/\d/.test("abc"));//false

    // \D 非纯数字 [^0-9]
    console.log(/\D/.test("ac"));//true
    console.log(/\D/.test("ac1"));//true
    console.log(/\D/.test("1"));//false
    console.log("#####################");

    // \s 表示空白字符 [\f\n\r\t\v\xOB]
    console.log(/\s/.test("\x0B"));//true
    console.log(/\s/.test("\v"));//true
    console.log(/\s/.test(""));//空白字符 false
    console.log(/\s/.test(" "));//空字符串 true (有一个字符但是为空)

    // \S 表示非空白字符 [^\f\n\r\t\v\v0B]
    console.log(/\S/.test(""));//false
    console.log(/\S/.test(" "));//false

    // \w 表示单词字符（所有的字母、数字、下划线） [A-z0-9_]
    console.log(/\w/.test("i8osAJk_"));//true
    console.log(/\w/.test(" "));//false
    console.log(/\w/.test("-"));//false

    // \W 表示非单词字符 [^A-z0-9_]
    console.log(/\W/.test("1a_"));//false
    console.log(/\W/.test(" "));//true
    console.log(/\W/.test("-"));//true

    //匹配中文：[\u4e00-\u9fa5]  固定用法 中文只能在正则表达式里这样表示
    console.log(/[\u4e00-\u9fa5]/.test("a"));//false
    console.log(/[\u4e00-\u9fa5]/.test("在吗"));//true

    // . [^\n\r] 表示除了换行和回车的任意字符 只有\n 或者\r 或者\n\r
    console.log(/./.test("abffjrh903_ji-?"));//true
    console.log(/./.test("abffjrh903_ji-?\n"));//true
    console.log(/./.test("abffjrh903_ji-?\r"));//true
    console.log(/./.test("\r"));//false
    console.log(/./.test("\n"));//false
    console.log(/./.test("\n\r"));//false
</script>
</html>

8.量词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" pattern="\d{3}">
        <input type="submit" value="提交">
    </form>
</body>
<!-- 
    量词：用于处理一系列紧密相连的同类数据，通过{}定义量词
    {n} 硬性量词
    {n,m} 软性量词 表示至少出现n次 最多不能超过m此
    {n,} 表示至少出现n次
    + 表示至少出现一次{1,}
    * 表示出现0次或者多次 {0,}
    ？ 表示出现0或者1次 {0,1}
 -->
 <script>
     // {n} 代表出现n个 至少是n个 必须从开头到结尾匹配 否则只要满足n就是true
     console.log(/\d{3}/.test());

     //{n,m} 要符合必须加上开头结尾 ^ $
     console.log(/\d{3,5}/.test("12"));
     console.log(/\d{3,5}/.test("1234"));
     console.log(/\d{3,5}/.test("12345"));
     console.log(/\d{3,5}/.test("123456"));
     console.log(/^\d{3,5}$/.test("123456"));

     // {n,} 至少出现n次
     console.log(/\d{3,}/.test("12")); 

     // * 0次或者多次

     // ？ 0次或者1次
     console.log(/\s?/.test(" "));//true
 </script>
</html>

9.分组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 分组 用（）
    //作用：为了捕获和重复使用
    //小括号用于分组 正则内部使用时 \编号 外部使用时 $编号  编号从1开始
    var str = "123+789";
    console.log(str.replace(/(\d+)\+(\d+)/,"$1*$2"));

    // 分组必须是一样的 正常情况下 123是$1 345是$2 但是由于我们使用的是\1 因此他们不能这样对应
    var str = "123+123";
    console.log(str.replace(/(\d+)\+(\1)/,"$1*$2"));

    function fn() {
        console.log(arguments);
    }
    fn();

    // 捕获(?=exp) 表示其后紧接指定字符串的字符串 (?!exp) 表示其后没有紧接字符串的字符串 

    var str = "ehea woreaa ea";
    // 如果不添加（aa） 代表替换b首次出现的位置
    console.log(str.replace(/e/,"123"));//123hea woreaa ea

    // 如果添加了（aa）或者（?=aa）代表 b紧挨着的ll的首次出现的位置发生替换
    console.log(str.replace(/e(aa)/,"123"));//eh123aa woreaa ea
    console.log(str.replace(/e(aa)/,function(){
        console.log(arguments);
    }));
    
    console.log(str.replace(/e(?=aa)/,"123"));//eh123aa woreaa ea
    console.log(str.replace(/e(?=aa)/,function(){
        console.log(arguments);
    }));
    // 如果添加了(?!aa) 代表替换没有出现aa的位置首次替换
    console.log(str.replace(/e(?!aa)/,"123"));//123hea woreaa ea
    console.log(str.replace(/e(?!aa)/,function(){
        console.log(arguments);
    }));

    // 或 选择性 | 只要符合其中一个即可
    console.log(/(.jpg|.png|.gif)$/.test("aa.jpg"));//true
    console.log(/(.jpg|.png|.gif)$/.test("aa.png"));//true
    console.log(/(.jpg|.png|.gif)$/.test("aa.gif"));//true
    console.log(/(.jpg|.png|.gif)$/.test("aa.psd"));//false
    console.log(/(.jpg|.png|.gif)$/.test("gif.psd"));//false

</script>
</html>