js正则表达式常用方法梳理(附代码案例)

 更新时间:2024年05月15日 08:30:03   作者:资深前端之路  
正则表达式在我们日程的工作项目中,应该是一个经常用到的技能,在做一些字符的匹配和处理的过程中,发挥了很大的作用,这篇文章主要给大家介绍了关于js正则表达式常用方法的相关资料,需要的朋友可以参考下

1、常用的方法

RegExp:定义正则字面量。常用定义new RegExp(),或者//定义。

test:执行正则表达式的字面量方法进行匹配。匹配失败返回false,匹配成功返回true。

exec:获取正则匹配的片段,返回值是一个数组,第一个索引是匹配的字符串内容;如果未匹配,返回null。在执行的过程中要注意,exec方法默认只捕获第一个获取的字符串内容,如果想获取多个,需要在正则字面量中加入标识符g(全局标识符),第二次捕获的时候,就会按照顺序捕获第二个相同的内容。

在使用限定符{n,m}时,exce会默认捕获最大长度的字符串。如\d{1,3}进行匹配时,会返回最大的匹配长度。如果像获取最小的长度,可以在限定符后面加上?,如\d{1,,3}?。具体的代码,可以看代码案例

注意:正则主要是用来匹配字符串的方法,所以原字符中的内容只是值,与数字的类型没有关系。

2、元字符

  • \d:一位值为数字的字符串。
  • \D:一位非数字的字符串。
  • \s:一位空白内容字符串,主要包含:换行(\n) 、空格(\t)、 缩进。
  • \S:一位非空白内容的字符串。
  • \w:一位包含字母、数字、下划线的字符串。
  • \W:一位不包含字母、数字、下划线的字符串。
  • .:任意内容的字符串,不包含换行。

3、边界符

  • ^:开头必须是xx字符串。
  • $:结尾必须是xx字符串。

注意两者同时使用时,代表,开头必须是xx,且结尾必须是xx,是两种条件同时存在。

4、限定符

  • *:通用符,至少包含0~多次。所有字符串都通用。
  • +:代表1~多次。至少字符串要出现一次。
  • ?: 代表0~1次。字符串出现一次时,返回true;字符串不出现时,返回false.
  • {n}:代表连续出现n次。
  • {n,}:代表至少连续出现 >= n+次字符串。
  • {n,m}:代表至少连续出现>=n 且 <=m长度的字符串。

5、特殊符

  • ():将元字符作为一个整体。将多种组合方式作为整体。
  • | :代表或的含义,字面量中的规则只需要保持一个匹配条件即可。
  • []:代表一位中括号的字符。如[12345689],包含其中的一位就符合条件。如 0-9、a-z、A-Z

6、常用表达式

以下是常用的正则表达式规则,以下是自己常用的一些表达式规则,可以直接复制粘贴:

邮箱地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
网址:[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
国内手机号:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
国内电话号:^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
身份证号(15位、18位数字):^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$

7、收获总结

在回顾正则元字符的过程中,表达式的规则,首先定义包含的字符格式,然后限定字符串长度,接着确定是否有边界限制,如以xx开头,以xx结尾,最后是进行匹配执行。将按照这个顺序来理解正则,就容易很多。

8、代码案例

const initData3 = ()=>{
  let reg = /\d{1,3}/
  let reg2 = /\d{1,3}?/
  let str = "now is 1233434"
  let str2 = "now is 12"
  let a = reg.exec(str)
  let b = reg.exec(str2)
  let c = reg2.exec(str)
  let d = reg2.exec(str2)
  console.log('最大1',a)
  console.log('最大2',b)
  console.log('最小1',c)
  console.log('最小2',d)
}

附:校验密码强度

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
  • (?=…) 是正向肯定预查的语法,表示在当前位置向后查找匹配括号内的表达式。
  • .:匹配除换行符外的任意一个字符。
  • .* 表示匹配任意数量的字符(除换行符外)。
  • (?=.\d) 表达式的含义是:在当前位置向后查找,如果存在至少一个数字,则匹配成功。当前位置是在匹配的起始位置(^)之后。
  • (?=.[a-z]) 表示使用正向肯定预查来匹配至少一个小写字母。当前位置是在匹配的起始位置(^)之后。
  • (?=.*[A-Z]) 表示使用正向肯定预查来匹配至少一个大写字母。当前位置是在匹配的起始位置(^)之后。

包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

总结 

到此这篇关于js正则表达式常用方法的文章就介绍到这了,更多相关js正则表达式常用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用js实现的一个根据内容自动生成表格的函数

    用js实现的一个根据内容自动生成表格的函数

    用js实现的一个根据内容自动生成表格的函数...
    2007-08-08
  • 小程序跨页面交互的作用与方法详解

    小程序跨页面交互的作用与方法详解

    这篇文章主要介绍了小程序跨页面交互的作用与方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 微信小程序登录时如何获取input框中的内容

    微信小程序登录时如何获取input框中的内容

    这篇文章主要介绍了微信小程序登录时如何获取input框中的内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 创建一般js对象的几种方式

    创建一般js对象的几种方式

    本文主要介绍了创建一般js对象的几种方式。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 简单通过settimeout看javascript的运行机制

    简单通过settimeout看javascript的运行机制

    这篇文章主要给大家介绍了关于如何通过settimeout看javascript的运行机制的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • MUI 上拉刷新/下拉加载功能实例代码

    MUI 上拉刷新/下拉加载功能实例代码

    这篇文章主要介绍了MUI 上拉刷新/下拉加载功能实例代码,包括一些个人心得,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-04-04
  • JavaScript获取数组最后一个元素的3种方法以及性能

    JavaScript获取数组最后一个元素的3种方法以及性能

    在开发过程中,我们常常需要得到js数组的最后一个数组元素,下面这篇文章主要给大家介绍了关于JavaScript获取数组最后一个元素的3种方法以及性能,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • JS实现可点击展开与关闭的左侧广告代码

    JS实现可点击展开与关闭的左侧广告代码

    这篇文章主要介绍了JS实现可点击展开与关闭的左侧广告代码,通过鼠标onClick事件调用自定义javascript函数实现页面元素及样式的显示与隐藏效果,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • 微信小程序 JS动态修改样式的实现代码

    微信小程序 JS动态修改样式的实现代码

    这篇文章主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已,需要的朋友可以参考下
    2017-02-02
  • Swiper如何实现两行四列轮播图效果实例

    Swiper如何实现两行四列轮播图效果实例

    大家应该都知道,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,下面这篇文章主要给大家介绍了关于Swiper如何实现两行四列轮播图效果的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论