JavaScript正则表达式怎么使用(javascript,开发技术)

时间:2024-04-28 04:46:45 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

接下来,请跟着小编一起来学习吧!

    正则表达式的概述

    什么是正则表达式

    正则表达式( Regular Expression ) 是用于匹配字符串中字符组合的模式。在js中,正则表达式也是对象!

    正则表达式的作用

    • 正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。例如:我们在写登录注册功能的时候使用的表单验证(对用户名、密码进行一些字符或长度进行限制) ===> (匹配)

    • 正则表达式还常用于过滤掉页面内容的一些敏感词汇。例如:我们平常在打游戏时候的口吐芬芳被换成了*???? ===> (替换)

    • 正则表达式从字符串中获取我们想要的特定部分。例如:我们在逛淘宝的时候在搜索框中搜索内容,会弹出很多与搜索相关的提示内容 ===> (提取) etc…

    正则表达式的特点

    1. 灵活性、逻辑性和功能性非常的强

    2. 可以迅速的用极简单的方式达到字符串的复杂控制

    3. 对于刚接触的人来说,比较晦涩难懂(缺点)

    4. 在实际开发中一般都是拿来主义,直接cv调用????,但是你得懂,这样的话你可以进行简单的修改!

    正则表达式在js中的使用

    创建正则表达式

    在js中可以通过两种方式创建正则表达式

    利用 RegExp 对象来创建

    letregexp=newRegExp(/123/);
    console.log(regexp);///123/

    利用字面量创建(推荐使用!)

    letrg=/123/
    console.log(rg);///123/

    测试正则表达式 test

    虽然在上面我们创建了正则表达式,但是在实际使用中,是要匹配正则表达式的,这里的话就引入了test

    test() 是正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串

    代码书写:regexObj.test(str)

    1. regexObj 是我们写的正则表达式

    2. str 是我们要测试的文本

    3. 就是检测str文本是否符合我们所写的正则表达式规范

    letrgp=/123/
    console.log(rgp.test(123));//true

    正则表达式中的特殊字符

    正则表达式的组成

    一个正则表达式可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,比如/abc/。其中特殊字符也被成为元字符,在正则表达式中是具有特殊意义的专用字符,如 ^、&、+ 等等。

    特殊符号链接直达 ===> ????正则表达式mdn????

    边界符

    正则表达式中的边界符用来提示字符所在的位置,主要有两个字符

    边界符说明^表示匹配行首的文本(从谁开始)$表示匹配行尾的文本(以谁结束)

    在上方内容中讲解创建正则表达式,如果我们仅仅采取/abc/这种没有特殊符号的方式,会发生一些情况:

    letrg=/123/
    console.log(rg.test(123));//true
    console.log(rg.test(11234));//true

    我们可以发现当我们测试的内容只要是符合正则表达式都会打印出true,如果我们想设置以123开头的呢?这就需要我们的特殊符号了!

    letreg=/^abc/
    console.log(reg.test('abc'));//true
    console.log(reg.test('aabce'));//false
    console.log(reg.test('aaabcc'));//false

    通过以上的方式,我们限制了测试的字符串必须符合以abc开头的规范,所以下方两行会返回false
    当你需要精确匹配的时候,你可以通过控制开头和结尾实现

    letregs=/^abc$/
    console.log(regs.test('abc'));//true
    console.log(regs.test('abcd'));//false

    该代码表示,测试的字符串必须是abc,其余的都会打印false

    字符类

    在实际开发过程中,我们不可能要匹配一连串的字符,我们需要的功能是我可以随意去匹配,只要满足限制就行,字符类就可以解决这个问题。
    字符类:表示有一系列的字符可以选择,只要匹配其中一个就可以了 符号:[]

    举例:let rg = /[abc]/ ,表示只要测试字符串满足 包含a 或 包含b 或 包含c 就返回true

    我们可以加上特殊字符:let reg = /^[abc]$/,表示,你的测试字符串只能是a 或者 b 或者c!

    如果你想匹配一个范围内的字符串可以使用特殊符号[-]

    举例 : let reg = /^[A-z]$/,表示26个英语字母任何一个字母(大小写均可),都会返回true,但是只能是其中的一个!

    • 字符组合
      我们可以设置更有灵活性的正则表达式let rg = /^[A-z0-9-]$/,表示26个英语字符、个位数字、两个符号任意一个都会打印true

    • 字符类中的^符号
      我们知道^符号在外部表示从谁开始的意思,但是一旦它也出现在字符类[]中,则表示取反的意思!
      举例:let rg = /^[^A-z0-9
      -]$/,第一个^表示从谁开始,第二个^表示对这个正则规范取反操作,如:不能是26个字母中的任意一个 etc…

    量词符

    量词符顾名思义就是与数量有关,这时你就要想一想它跟字符类的结合使用咯!量词符用来设定某个模式出现的次数

    量词说明重复零次或多次+重复一次或更多次?重复零次或一次{n}重复n次,n 是一个正整数,匹配了前面一个字符刚好出现了 n 次。{n,}重复n次或更多次,n 是一个正整数,匹配前一个字符至少出现了 n 次。{n,m}重复n到m次,如果 n 或者 m 的值是 0, 这个值被忽略。

    的使用

    相当于 >=0,可以出现0次或者很多次

    let rg = /^a$/,表示,a可以出现0次或者多次

    letrg=/^a$/;
    console.log(rg.test(''));//true
    console.log(rg.test('a'));//true
    console.log(rg.test('aaa'));//true

    +的使用

    相当于 >=1 可以出现一次或多次

    letrg=/^a+$/;
    console.log(rg.test(''));//false
    console.log(rg.test('a'));//true
    console.log(rg.test('aaa'));//true

    ?的使用

    相当于1 || 0

    letrg=/^a?$/;
    console.log(rg.test(''));//true
    console.log(rg.test('a'));//true
    console.log(rg.test('aaa'));//false

    {n}的使用(重点掌握)

    letrg=/^a{3}$/;
    console.log(rg.test(''));//false
    console.log(rg.test('a'));//false
    console.log(rg.test('aaa'));//true

    在这里表示字符串a重复了三次

    {n,}的使用(重点掌握)

    letrg=/^a{3,}$/;
    console.log(rg.test(''));//false
    console.log(rg.test('a'));//false
    console.log(rg.test('aaa'));//true
    console.log(rg.test('aaaaa'));//true

    在这里表示字符串a必须要重复三次以及以上,否则打印false

    {n,m}的使用(重点掌握)

    letrg=/^a{3,16}$/;
    console.log(rg.test(''));//false
    console.log(rg.test('aaa'));//true
    console.log(rg.test('aaaaaaaaaaaaaaaaaaaaaaaaaaa'));//false

    在这里表示字符串a重复的区间是大于等于3 并且 小于等于16

    结合某个模式应用

    letreg=/^[A-z0-9_-]{3,16}$/
    console.log(reg.test('1018703239'));//true
    console.log(reg.test('101a24543q'));//true

    这个正则表达式其实就可以用来写用户名的表单验证了!

    括号总结

    • 大括号{} : 是 量词符 ,表示重复的次数

    • 中括号[] : 是 字符集合, 表示匹配方括号中的任意字符

    • 小括号() : 表示优先级!

    预定义类

    预定义类指的是某些常见模式的简写方式。(简化之前的写法!)

    预定类说明\d匹配0-9之前的任意数字,相当于[0-9]\D匹配一个非数字字符。等价于 [^0-9]\w匹配一个单字字符(字母、数字或者下划线)。等价于 [A-Za-z0-9]\W匹配一个非单字字符。等价于 [^A-Za-z0-9_]\s匹配空格(包括换行符、制表符、空格符等等) ,相当于[\t\r\n\v\f]\S匹配非空格的字符,相当于[^\t\r\n\v\f]

    举例:

    我们在这里做一个需求,验证座机号码,座机号码有两种形式 010-12345678 或者 0530-1234567.

    (注 : 正则表达式中的或者符号为 : |

    letreg=/^\d{3}-\d{8}|\d{4}-\d{7}$/
    console.log(reg.test('010-12345678'));//true
    console.log(reg.test('0500-1234567'));//true

    正则表达式的替换

    1.replace替换

    replace()方法可以实现替换字符串操作,用来替换的参数可以是一个字符串也可以是一个正则表达式

    写法:
    stringObj.replace(regexp/substr,replacement)

    • 第一个参数 : 被替换的字符串或正则表达式

    • 第二个参数 : 替换为的字符串

    • 返回值是一个替换完毕的新字符串

    2.正则表达式参数

    /表达式/[switch]
    switch(也称为修饰符)按照什么模式来匹配,有三种常用的值:
    g : 全局匹配
    i : 忽略大小写
    g + i : 全局匹配 + 忽略大小写

    案例:

    <body>
    <textareacols="30"rows="10"class="one"></textarea>
    <divclass="t"></div>
    <script>
    lettext=document.querySelector('.one')
    letts=document.querySelector('.t')
    text.onblur=function(){
    ts.innerHTML=text.value.replace(/星星币|牛哇/g,'
    ')
    }
    </script>

    JavaScript正则表达式怎么使用

    在这里就可以看到正则整体替换的效果了!

    开发中常用正则表达式

      li><p>Email地址:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$</p
    • 手机号码:^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$

    • 国内座机电话号码(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}

    • 身份证号(15位、18位数字),最后一位是校验位,可能为数字或字符X:(\d{15}$)|(^\d{18}$)|(\d{17}(\d|X|x)$)

    • 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):1[a-zA-Z0-9_]{4,15}$

    • 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线):2\w{5,17}$

    • 日期格式:^\d{4}-\d{1,2}-\d{1,2}

    • 腾讯QQ号:[1-9][0-9]{4,} (腾讯QQ号从10000开始)

    若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

    本文:JavaScript正则表达式怎么使用的详细内容,希望对您有所帮助,信息来源于网络。
    上一篇:怎么使用Vue解决动态挂载下一篇:

    16 人围观 / 0 条评论 ↓快速评论↓

    (必须)

    (必须,保密)

    阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18