7.JS-正则

@1932

已于 2022-03-27 16:28:29 修改

阅读量204

点赞数 1

分类专栏： JavaScript 文章标签：正则表达式 javascript html 学习

于 2022-03-12 16:06:13 首次发布

本文链接：https://blog.csdn.net/hermione_m/article/details/123445022

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

正则表达式的简介

正则表达式用于定义一些字符串的规则，
1. 计算机可以根据正则表达式，来检查-个字符串是否符合规则，
2. 获取将字符串中符合规则的内容提取出来
创建正则表达式对象
1. 语法：
  1. var reg = new RegExp("正则表达式","匹配模式");
2. 使用typeof检查正则对象，会返回object
3. var reg = new RegExp("a"); 这个正则可以用来检查一个字符串中是否含有a在构造函数中可以传递一个匹配模式作为第二个参数
4. 可以是：
  1. i 忽略大小写
  2. g 全局匹配模式
正则表达式的方法:
1. test( )
  1. 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
  2. 如果符合则返回true，否则返回false

<!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>正则表达式基础</title>
    <script>
    
        var reg = new RegExp("as","i");
        var str = "Asdfghj";
        var result = reg.test(str);
        console.log(result);
        console.log(reg.test("ASERTY"));
        

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

正则语法

使用字面量来创建正则表达式

语法：
1. var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单
使用构造函数更加灵活

<!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>正则语法</title>
    <script>
        /*
            1-使用字面量创建正则表达式
        */
        var reg = new RegExp("a","i");
        reg = /a/i;

        console.log(typeof reg);
        console.log(reg.test("abc"));
        
        // 2-创建一个正则表达式，检查一个字符串中是否有a或b
        /*
            使用 | 表示或者的意思
        */
        reg = /a|b/;
        console.log(reg.test("bcdeg"));
        reg = /ab/;
        console.log(reg.test("bcdeg"));

        /*
            3- 创建一个正则表达式检查一个字符串中是否有字母
        */
        reg =/a|b|c|d/;
        
        /*
            []里面的内容也是或的关系
            [ab] == a | b;
            [a-z]:任意小写字母；
            [A-Z]：任意的大写字母
            [A-z]:任意字母
        */
        reg = /[ab]/;
        console.log(reg.test("achrgr"));

        /*
            4- 检查一个字符串中是否含有abc/adc/aec
        */
        reg = /a[bde]c/;
        
        console.log(reg.test("aec"));

        /*
            5- [^ ] 除了^后面的字母以外的符号
        */
        reg = /[^ab]/;
        console.log(reg.test("ab"));
        console.log(reg.test("abc"));
    </script>
</head>
<body>
    
</body>
</html>

字符串和正则相关的方法

split( )

可以将一个字符串拆分为一个数组.
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
这个方法就算不指定全局匹配，也会全部拆分

search( )

可以搜索字符串中是否含有指定内容
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回- 1
它可以接受一一个正则表达式作为参数，然后会根据正则表达式去检索字符串
search()只会查找第一个复合条件的字符串，即使设置了全局匹配也没用

match()

可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
- 我们可以设置正则表达式为全局匹配模式(g)，这样就会匹配到所有的内容
- 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

replace()

可以将字符串中指定内容替换为新的内容
参数:
1. 被替换的内容，可以接受一个正则表达式作为参数
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>字符串和正则相关的方法</title>
    <script>
        /*
          -1-
            split( )
                可以将一个字符串拆分为一个数组.
                方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
                这个方法就算不指定全局匹配，也会全部拆分

        */
        //根据任意字母来将字符串拆分
        var str = "1a2b3c4d5h6j7k8l9o6"
        var result = str.split(/[A-z]/);

        // console.log(result);

        /*
          -2-
            search( )
                可以搜索字符串中是否含有指定内容
                如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回- 1
                它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
                search()只会查找第一个复合条件的字符串，即使设置了全局匹配也没用
        */

        str = "hello abc adc afc";
        //搜索字符串中是否含有abc或adc或afc
        result = str.search("abc");
        // console.log(result);

        //使用正则的方法
        result = str.search(/a[bdf]c/);
        // console.log(result);

        /*
          -3-
            match()
                可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
                默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
                    我们可以设置正则表达式为全局匹配模式(g)，这样就会匹配到所有的内容
                    可以为一个正则表达式设置多个匹配模式，且顺序无所谓
                match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

        */
        str = "1a2b3c4d5h6j7k8l9o6"
        result = str.match(/[A-z]/);
        // console.log(result);

        result = str.match(/[A-z]/g);
        // console.log(result);

        str = "1A2b3c4d5H6J7k8l9o6"
        result = str.match(/[a-z]/gi);
        // console.log(result);
        // console.log(Array.isArray(result));

        /*
          -4-
            replace()
                -可以将字符串中指定内容替换为新的内容
                参数:
                    1.被替换的内容，可以接受-个正则表达式作为参数
                    2.新的内容
                默认只会替换第一个
        */
        str = "1a2bac4A5h6j7a8A9o6"
        result =str.replace("a","@_@");
        // console.log(result);

        result =str.replace(/a/g,"@_@");
        // console.log(result);

        result =str.replace(/a/gi,"@_@");
        // console.log(result);

        result =str.replace(/[A-z]/gi,"@_@");
        // console.log(result);

        result =str.replace(/[A-z]/gi,"");
        // console.log(result);
        


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

正则表达式语法

量词

通过量词可以设置-一个内容出现的次数
量词只对它前边的一个内容起作用，如过前面想要重复的字符超过一个，可以将前面的内容用一个小括号括住
{n} 正好出现n次
{m,n} 出现m-n次
{m,} m次以上
+至少一个，相当于{1, } 例：/a+/
* 0个或多个，相当于{0, } 例：/a* /
? 0个或1个，相当于{0, 1} 例:/a? /

开头结尾

检查一个字符串中是否以a开头
^ 表示开头
$ 表示结尾

<!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>正则表达式语法</title>
    <script>
        /*
            创建一个正则表达式检查一个字符串石佛含有aaa
        */
        

        /*
            量词
                - 通过量词可以设置-一个内容出现的次数
                - 量词只对它前边的一个内容起作用，如过前面想要重复的字符超过一个，可以将前面的内容用一个小括号括住
                - {n} 正好出现n次
                - {m,n} 出现m-n次
                - {m,} m次以上
                - + 至少一个，相当于{1,} 例：/a+/
                - * 0个或多个，相当于{0,}   例：/a* /
                - ? 0个或1个，相当于{0, 1} 例:/a? /
        */
        var reg = /a{3}/;
        // console.log(reg.test("abgabgabg"));
        // console.log(reg.test("aaabgabgabg"));

        reg = /a{1,3}/;
        // console.log(reg.test("abgabgabg"));
        // console.log(reg.test("aaabgabgabg"));
    
        reg =/(abg){2}/;
        // console.log(reg.test("abgabgabg"));
        // console.log(reg.test("aaabgabgabg"));

        /*
            检查一个字符串中是否以a开头
            ^ 表示开头
            $ 表示结尾
        */
        reg =/^a/;
        // console.log(reg.test("abgabgabg"));
        // console.log(reg.test("bgabgabg"));

        reg =/a$/;//匹配结尾的a
        // console.log(reg.test("abgabgabg"));
        // console.log(reg.test("gabgabga"));
        
        /*
            练习：
                创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
        */
    </script>
</head>
<body>
    
</body>
</html>

转义字符

检查一个字符串是否含有 " ."
" ." 查找单个字符，除了换行和行结束符
在正则表达式中使用\作为转义字符
" \."来表示 "."
"\\" 表示 "\"
注意: 使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
1. 如果使用\则需要用\\来代替

字符https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp \w 字母数字下划线

<!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>正则表达式语法</title>
    <script>
        /*
            检查一个字符串是否含有 " ." 
           " ." 查找单个字符，除了换行和行结束符
            在正则表达式中使用\作为转义字符
           " \."来表示 "."
           "\\" 表示 "\"

           注意: 使用构造函数时，由于它的参数 是一个字符串，而\是字符串中转义字符，
            如果使用\则需要用\\来代替
        */
        //接收一个用户的输入
        // var str = prompt("请输入你的用户名：");
        var str  = "     he    llo     ";
        //去除掉字符串前后的空格
        //去除空格就i是使用 ""来代替空格
        console.log("-"+ str+"-");

        //去除开头的空格
        str = str.replace(/^\s* /,"");
        console.log("-"+ str+"-");

        //去除开头和结尾的空格
        str = str.replace(/^\s*|\s*$/g,"");
        console.log("-"+ str+"-");

        //去除字符串中所有的空格
        str = str.replace(/\s/g,"");
        console.log("-"+ str+"-");
    </script>
</head>
<body>
    
</body>
</html>

正则练习邮箱

<!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>邮箱正则练习</title>
    <script>
        /*
            任意字母数字下划线  .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
            /\w{3,} (\.\w+)*    @ [A-z0-9]+   (\.[A-z]{2,5}){1,2}   
        */
        var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
        var email = "1231231rydj@qqsdtgsy.cogfm"
        console.log(emailReg.test(email));
        
    </script>
</head>
<body>
    
</body>
</html>

JS常用正则表达式https://www.cnblogs.com/zfc2201/archive/2012/12/18/2824107.html%C2%A0