js12----正则表达式

realllll
153 阅读2分钟

正则表达式

正则表达式RegExp(Regular Expression)：匹配 特殊字符或有特殊搭配原则的字符 的最佳选择。

正则表达式的创建方法

1.直接量

    var reg = /abc/;
    var str = "ascafajlabclkjlkabc"
    console.log(reg.test(str));//test语法用来检测字符串中是否含有正则表达式，
                               //有返回true，没有返回false
    console.log(str.search(reg));//匹配正则表达式用search

image.png

2.构造方法RegExp()

    var str = "dskfjghfdkj";
    var newReg=new RegExp("f");
    var re=str.replace(newReg,"hello");//替换字符串
    console.log(re);

image.png

3.正则表达式中经常用到的字符串方法

1.replace 替换字符串

2.macth将匹配到的字符串转为数组保存

    var reg=/a/;
    var newReg=new RegExp("v")；
    var str1="vfava";
    console.log(  Array.isArray( str1.match( reg ) ) );
    console.log(  str1.match( reg ) );
    console.log(  str1.replace(reg,"test") );
    console.log(  str1.replace(newReg,"target"));

image.png

正则表达式的三个属性（修饰符）

1. i 匹配时不区分大小写

    var str = "abcabcABCACB";
    var reg = /ABC/i;
    console.log(str.match(reg));

image.png

2. g 全局匹配

    var str = "abcabcABCACB";
    var reg = /ABC/ig;
    console.log(str.match(reg));

image.png

3. m 多行匹配

 var str3=`
abcda
abcda
abcda       
    `
    var reg4=/^a/g;
    console.log(    str3.match(reg4)   );

image.png

     var str3=`
 abcda
 abcda
 abcda       
    `
    var reg4=/^a/mg;
    console.log(    str3.match(reg4)   );

image.png

3.案列

【案例一】 在评论中查找指定的关键词

        var userPL=prompt("请输入您的珍贵评论！");
        var reg=/我/g;

        if ( userPL ) {
            var time=userPL.match(reg).length;
            document.write("用户评论："+userPL+"<br><br>");
            document.write("'我'在评论中出现的次数："+time+"<br><br>");
        }else{
            document.write("用户暂未评论"+"<br><br>");
            document.write("'我'在评论中出现的次数："+0+"<br><br>");
        }

image.png

【案例二】在文本中标红任意关键词

        var str=`JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。JavaScript很容易使用！你一定会喜欢它的！`
        document.querySelector("body").innerHTML= str;

        var keyWord=prompt("请输入您想要查找的关键词！");
        if( keyWord ){
                //正则表达式的“构造RegExp函数创建”  ，以及属性应用
            str=str.replace(  new RegExp(keyWord,"ig")  ,`<span style="color:red">${keyWord}</span>`);
            document.querySelector("body").innerHTML=str ;

        }

image.png

特殊字符

image.png

1.中括号[] ,表达一位字符

 var str1="fafakfFka6749aaaajFuFUGa";
 var reg1=/[0-9]/g,reg2=/[a-z]/gi;
    console.log(  str1.match(reg1)  );
    console.log(  str1.match(reg2)  );

image.png

2.竖杠| ,表示或的意思

 var str1="fafakfFka6749aaaajFuFUGa";
 var reg3=/([a-z][0-9])|([0-9][a-z])/ig;
    console.log(  str1.match(reg3) );

image.png

3.反斜杠，"\num" 反向引用以及“$num”--括号中的正则表达式

    var str1="fafakfFka6749aaaajFuFUGa";
    var reg4=/([a-z])\1/gi;
    console.log( str1.match(reg4) );
    // XYXY
    var reg5=/([a-z0-9])([a-z0-9])\1\2/gi;\num表示与第num个（）中的内容相同
    console.log( str1.match(reg5) );

image.png

replace 中应用正则表达式时，需要使用“$num” 表示反向引用,将匹配得到的XYXY 类型的字符串，替换为XXYY 类型

 var str1="fafakfFka6749aaaajFuFUGa";
  var reg5=/([a-z0-9])([a-z0-9])\1\2/gi
 console.log( str1.replace(reg5,"$1$1$2$2")  );

image.png

元字符“\字母”

元字符是拥有特殊含义的字符，元字符也可以组合放进中括号里去使用，一个元字符代表一位(\d|\D)

image.png

常用的元字符

\d----------数字 \D-----------非数字

\w--------常用（英文、数字） \W--------------非“常用字符”

\s---------空白字符 \S------------非空白字符

[\d\D] [\w\W] [\s\S] 都可以表示为任意字符

量词

量词，代表数量的词（下面表达式的n代表的是一个匹配规则，n后边符号的符号定义量词规则）。

贪婪匹配。

image.png

1 n{startNum,endNum} endNum可以不给值

    var reg1=/\d{1,5}/;
    var str="18441*8kaf5\\whk";
    console.log(  reg1.test(str) );//true
    var reg2=/[a-z]{10,}/ig;
    console.log(  reg2.test(str) );//false

image.png

2 n+ 一个以上 n* 0个以上 n? 0个或1个

 var str="18441*8kaf5\\whk";
 var reg3=/(^\d[\w\W]*\d$)|(^\d$)/;以数字开头，以数字结尾或者单独一个数字
    console.log(  reg3.test(str) );

image.png

3 (?=) 位置限定条件 (?!)不跟着某种字符---位置限定条件

    var str="18441*8kaf5\\whk";
    var reg5=/\d(?=[a-z])/ig；紧接字母前面的数字
    var reg6=/\d[a-z]+/ig;数字及其后面的字母
    console.log(  str.match(reg5)  );
    console.log(  str.match(reg6)  );

image.png

4 验证特殊字符时，需要加反斜杠，在正则表达式中将其转义为普通字符

     var str="18441*8kaf5\\whk";
     var reg7=/\d\*/;
     console.log(  reg7.test(str) );//true

image.png

案列

1.验证小数或者整数

var str = "+0.2316";
var reg = /^-?[0-9]*[\d]$|^-?\d*\.\d{1,}$|^\+?[0-9]*  [\d]$|^\+?\d*\.\d{1,}$/;
console.log(reg.test(str));

image.png 分析：^-?[0-9]*[\d]$，开头是否有-号，0-9有0-无限个，结尾为数字；其他同理，注意“.”需要加“\”转义

2.验证年月日格式，如：2022-07-07

var str = "2022-7-7";
var reg = /^[0-9]{4}\-[0-9]{1,2}\-[0-9]{1,2}$/;
console.log(reg.test(str));

image.png

3.验证手机号

var number = "15730459035";
var reg=/^1[3-9][0-9]{9}$/
console.log(reg.test(number));

image.png 分析：var reg=/^1[3-9][0-9]{9}$/，电话号码以1开头，第二位为3-9，后九位为0-9，且以数字结尾

4.验证一个字符串是否既含有数字，字母，又含有下划线

var str = "1sd51sa+-_65dsa1sd1a31sa3"
var reg =/^(?=.*\d+)(?=.*_+)(?=.*[a-z]+).{3,}$/i
console.log(reg.test(str));

image.png 分析：var reg =/^(?=.\d+)(?=._+)(?=.*[a-z]+).{3,}/i，?=.∗表示在任意长度字符串（0，无穷）之后接上数字，或者下划线，或者字母。.3,/i，?=.*表示在任意长度字符串（0，无穷）之后接上数字，或者下划线，或者字母。.{3,}表示任意字符串结尾，至少有三个字符。

5.验证匹配邮箱地址

var str = "dadsa_sad@ads.com";
var reg=/^\w+@\w+\.(com|cn)$/
console.log(reg.test(str));

image.png 分析：var reg = /^\w+@\w+.(com|cn)/，\w+表示常用字符串开头至少1个，(˙com∣cn)/，^\w+表示常用字符串开头至少1个，\.(com|cn)以.com或者.cn结尾

6.匹配汉字（需要就百度）

 var reg=/[\u4E00-\u9FFF]+/

7.去重

var str ="abcbcaqweewqrtyytrabcbcaqweewqrtyytrk";
var reg = /([\s\S])(?=.*\1+)/g  //反向引用:\1与[\s\S]为重复字符串  
                            // 紧接在[\s\S]字符串后面任意长度字符串之后重复的\1
console.log(str.replace(reg,""));
console.log(str.match(reg));

image.png

avatar
文章
阅读
粉丝