正则表达式

最新推荐文章于 2023-04-22 19:22:47 发布

荒年1010

最新推荐文章于 2023-04-22 19:22:47 发布

阅读量114

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42673485/article/details/118344719

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

正则入门

正则表达式:验证字符串是否满足某个规则

// 创建正则表达式
        var reg = new RegExp(/'123'/);
        console.log(reg);   //===>/'123'/
        var reg1 = /clx/

        // replace(regwx,''/function)

        var str = '一半,两半,三半';
        // 找到str中所有的'半'  并替换成'个'

        // g 全局匹配 在整个字符中匹配
        // 没有g 当遇到第一个匹配结果的时候 结束匹配
        var reg2 = /[半]/g;
        str = str.replace(reg2,'个')
        console.log(str);//===>一个,两个,三个

修饰符

// 修饰符:
        // g 全局匹配
        // i 忽略英文字母大小写
        // m 多行匹配
        // 注意:修饰符可以多个同时使用
        var str = 'aaaaAAAAAabbbbbbbdsfqwerqwe34r23r2342134234fsafsd'
        var  reg = /[a]/
        var  reg1 = /[a]/g
        var  reg2 = /[a]/gi
        // str.match(regxp) 返回正则匹配的结果
        // 如果没有满足正则条件的,那么返回null
        // 用途:
        //      1.搜索字符串中是否存在某个字符
        //      2.输出正则匹配的所有字符
        console.log(str.match(reg));  //==>["a"]
        console.log(str.match(reg1)); //==>["a", "a", "a", "a", "a", "a"]
        console.log(str.match(reg2)); //==>["a", "a", "a", "a", "A", "A", "A", "A", "A", "a", "a"]

字符类

一般情况下，一个字符对应一个字符串

特殊:需要配[某类]字符

使用[]来构建简单的类
所谓的类是指符合某些特性的对象;一个泛指:而
不是特定某个字符
例如[abc]匹配 a或b或c中其中一类就可以
例如:a,b,c,ab,ac,bc
/abc/则只能匹配带有abc的字符

		var reg  = /[中国人]/g
        // 匹配的是'中国人'字符
        var reg1 = /中国人/g
        // 在str中有没有'中,国,人'三个字符
        var str = '我在中间的国家的人,是中国人' 
        // console.log(str.match(reg));  // ====>["中", "国", "人", "中", "国", "人"]
        // console.log(str.match(reg1)); // ====>["中国人"]

范围类

		var reg3 = /[a-z]/;
        var reg4 = /A-Z/;
        var reg5 = /[a-zA-Z]/g;
        var reg6 = /a-zA-Z/g;

        // console.log(str1.match(reg3)); //26个英文小写字母
        // console.log(str1.match(reg4)); //只能打印出'A-Z'一样的字符串
        // console.log(str1.match(reg5)); //26个英文大小写字母
        // console.log(str1.match(reg6)); //只能打印出'a-zA-Z'一样的字符串
        

        // var reg7 = /[1234567890]/
        var reg7 = /[0-9]/g       //===>'1','2','3','4','5','6','7','8','9','0'中任意一个
        var reg8 = /1234567890/g  //===>只匹配'1234567890'样式的字符串
        

        // 匹配数字字母下划线中任意一个字符,匹配结果,字符长度为1
        var reg9 = /[a-zA-Z0-9_]/g
        // console.log(str1.match(reg7)); //==>["0", "8", "9", "3", "4", "2", "5", "6"]
        // console.log(str1.match(reg8)); //==>null
        // console.log(str1.match(reg9)); //==>打印出str1中所有的数字字母下划线

元字符

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

反义代码

\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

取反

var str = 'fjslajfljwoiAWRTCerio21      34217349,-==+++f'
var reg1 = /[^a-zA-Z]/g // 除了英文字母其他都匹配
console.log(str.match(reg1));
console.log(str.match(/\s/g));  //所有的空格
console.log(str.match(/[' ']/g));  //所有的空格
console.log(str.match(/\S/g));  //所有的非空格字符
console.log(str.match(/[^' ']/g));  //所有的非空格字符

// 删除str所有空格
var res = str.replace(/\s/g, '')

量词

量词：是匹配一个字符的长度多少？
{n,m} 匹配字符长度,在n到m之间
{n,}  匹配字符长度,最小为n
{n}	  匹配字符长度为n
+  ===  {1,}
*  ===  {0,}
?  ===  {0,1 }
注意:以上都是贪婪匹配
var str = '354ij5tgHG'; //待匹配字符
console.log(str.match(/[0-9]+/g))
console.log(str.match(/[0-9]*/g))
console.log(str.match(/[0-9]?/g))
console.log(str.match(/[0-9]+?/g)) //匹配所有长度为1的数字
console.log(str.match(/[0-9]{1,}/g))
console.log(str.match(/[0-9]{1,4}/g))

在这里插入图片描述

// 长度为1到6的数字字符
var reg3 = /[0-9]{1,6}/g; 
var reg4 = /[0-9]{1,6}[a-z]/g;
console.log(str.match(reg3)); //["354", "5"]
console.log(str.match(reg4)); //["354i", "5t"]

匹配的规律是什么？
计算机中的所有的运算都是从右往左运算的
人的思维运算,都是从左往右运算的
目的:帮助大家理解为什么输出结果,正则运算都是模糊运算

规律
1:待匹配字符 2:匹配的结果
第一步:是什么模式匹配? 贪婪模式与非贪婪模式
第二步:看你的表达式中需要匹配几个字符,每个字符长度是多少?
第三步:正则表达待匹配字符从左往右匹配,不回头,被匹配的字符不会再次匹配

// 手机号
// 以数字字符长度为9 结尾
// ^[1] 表示以1开头
// 匹配三个字符
// 第一个字符  以1开头 长度为1 匹配1 
// 第二个字符  配置长度为 3或4或5或6 ....
// 第三个字符 匹配0-9长度为9的数字字符结尾
// 表达式接轨 以1开头,九个数字结尾,字符长度为11的字符串
var iphoneReg = /^[1][3-9][0-9]{9}$/;
var str1 = '14583339248'
console.log(str1.match(iphoneReg));
console.log(iphoneReg.test(str1));

在这里插入图片描述

		// /.*/;  //匹配任意字符  长度大于0
        // /.+/;  //匹配任意字符  长度大于1
        
        //练习:
        var res =  '       abcdrew     yufwqeufdu      ' 
        // 去除开头结尾的空格,中间的保留
        // |  或
        // /^\s*|\s*$/g  匹配开头空格或者结尾空格
        // console.log(res.replace(/^\s*|\s*$/g,''))

贪婪模式和非贪婪模式

		// 默认贪婪模式
        // 量词+?  为非贪婪模式  尽可能少的匹配
        // 量词    贪婪模式(默认模式)   尽可能多的匹配
        var reg = /\d+/; //贪婪
        var reg1 = /[0-9]{3,5}/g; //贪婪模式
        var reg2 = /[0-9]{3,5}?/g; //非贪婪模式
        var str = '3456rtgyhuj723543523468rtrvgy7256254626'
        console.log(str.match(reg1))
        console.log(str.match(reg2));

在这里插入图片描述

replace使用

<!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>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2>{{test}}</h2>
        <h3>{{num}}</h3>
    </div>
    <script>
        var data = {
            msg: 'hellow world',
            test: '这是测试数据',
            num: '123'
        }
        var app = document.querySelector('#app')
        var html = app.innerHTML


        // 方式一
        // var templateReg = /\{\{(.+)\}\}/g
        // var arr = html.match(templateReg);
        // for (var i = 0; i < arr.length; i++) {
        //     html = html.replace((/\{\{(.+)\}\}/), function (a) {
        //     $1 是匹配html的$1
        //         return data[RegExp.$1]
        //     })
        // }
        // app.innerHTML = html

        // 方式二
        html = html.replace((/\{\{(.+)\}\}/g), function (a) {
            // 重新写一个正则,匹配a
            var reg = /\{\{(.+)\}\}/;
            a.match(reg)
            // $1 对于一个字符  匹配对比 , 多次输出最后一次匹配
            console.log(RegExp.$1);
            //解决方式:匹配多个字符,每个字符匹配一次   解决$1为num
            return data[RegExp.$1]   //$1是reg匹配a的$1
        })
        app.innerHTML = html

        // 转义字符：{} () / $ # & * . //1、特殊字符，都要加转义\
        // 点符号：var reg2=/img\.jpg/g //转义字符 \n //2、.和+是特殊字符，原意匹配要加\转义
        // |符号：var reg1=/javascript|php|java/g //3、|表或者




        var str = '34567tyguuh88897'
        var reg = /\w{3}/g


        // replace(reg,callback)
        // 正则匹配几次 回调函数执行几次
        var res = str.replace(reg, function (a, b, c) {
            // console.log(a); //匹配结果
            // console.log(b); //从str中开始匹配的索引的位置
            // console.log(c); //待匹配字符
            //return 将匹配的结果  a替换为返回值
            return '哈'
        })
        console.log(res);


        var str1 = '     aaa 1    '
        var res1 = str1.replace(/^\s+|\s+$/g,function(a,b){
            // console.log(a,b);
            // console.log(a.length);
            return ''
        })
        console.log(res1);
    </script>
</body>

</html>

在这里插入图片描述

荒年1010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

正则入门正则表达式:验证字符串是否满足某个规则// 创建正则表达式 var reg = new RegExp(/'123'/); console.log(reg); //===>/'123'/ var reg1 = /clx/ // replace(regwx,''/function) var str = '一半,两半,三半'; // 找到str中所有的'半' 并替换成'个'
复制链接

扫一扫