前端javaScript 之【正则表达式】

简介: 现在很多做前端的同学对于正则已经远远的抛于脑后,这篇文章简单写一下正则,帮助大家回顾,同时也是小白学习的好地方。 正则表达式的基本表示:这个表很重要,争取多看几遍,最好背下来。 ^ // 说明字符串的开始 $ // 说明字符串的结束 \b // .

现在很多做前端的同学对于正则已经远远的抛于脑后,这篇文章简单写一下正则,帮助大家回顾,同时也是小白学习的好地方。

正则表达式的基本表示:这个表很重要,争取多看几遍,最好背下来。

^          // 说明字符串的开始
$          // 说明字符串的结束
\b         // 表示一个单词的开始或结束
\w         // 表示:数字、字母、下划线
\s         // 表示任意一个空白字符
\d         // 可以代表任意一个数字
.          // 点代表一个非换行的任意字符
[]         // 字符类 ,例如[a-z],注意:反过来[z-a]会报错
*          // 表示0~无穷多次
{n}        // 表示重复n次
{n,m}      // 表示重复n~m次
{n,}       // 表示重复n~无穷多次
+          // 代表重复1~无穷多次
?          // 代表重复0或1次 ,可用于懒惰匹配
|          // 或
()         // 分组

// avillin@163.com
// wx:VillinWeChat

定义一个正则表达式两种方法

1. 放在/ /之中来书写
2. var regExp = new RegExp('正则表达式')

两种方法一样,本次先用第一种方法举例

例如:var num = /^\d{3}$/num值验证的是三位数字,^代表字符串开始$代表字符串结束,\d代表数字,{3}重复3次。

验证正则test():可用test()方法来验证是否含有符合要求的字符,返回值为布尔值(true/false),如:num.test(123)

我们来写一个验证手机号输入正确与否的案例:

开发思考

  1. 目前手机号都是以1开头,所以1要写成固定。
  2. 第二位目前手机号可以是345678都可以。
  3. 剩下的九位数,0~9都可以,所以\d重复9次。

可以写成:/^1[345678]\d{9}$/[]是字符类,可以验证是否存在[]中所拥有的字符。

标签部分

<input type="number" id="tel"><span>请输入正确的手机号码</span>

js部分


// 取到input输入的值,丢失焦点后,开始验证手机号码,用onblur
document.querySelector(#tel).onblur = function() {

  var val = this.value // 取到input输入的value值
  
  var mobileReg = /^1[345678]\d{9}$/ //验证手机号正则
  
  if(mobileReg.test(val)){
  
    // 此时验证成功,写下想要执行的方法
    
  }else{
  
    // 此时验证失败,写下要执行的方法
    
  }
}

以上就是简单的正则表达式,如果你有兴趣可以简单的进阶一下:

刚才的例子是判断一个字符串是否符合要求,但正则不仅仅这么简单,还可以进行分组提取

正则给我们提供了一个exec()方法,如果匹配成功,返回一个数组Array,匹配失败会返回null

我们可以利用此方法提取电话号的区号和本地号码,如:

var tel = '0434-123456';   // 简单写一个电话号
var reg = /^(\d{3}|\d{4})-(\d{0,})$/  // 用()进行分组,区号可以是3位或4位,号码0~n个数值
var resule = reg.exec(tel)  // 结果赋值

上述的reg所包含的正则带有(),可以为其分组(\d{3}|\d{4})为一组,(\d{0,})为一组。

成功打印出来,返回数组格式,这样我们就可以轻松拿到想要的号段。

console.log(resule)
// ["0434-123456", "0434", "123456"]

正则捕获

正则表达式中如果有分组,那么分组匹配的内容,就会被保存到RegExp.$1-RegExp.$99中,这种现象叫做正则表达式的捕获

可能会有些不清楚,解释一下:RegExp代表的就是正则,$1-$99代表的是捕获到的每个字段,存在1-99当中。

那么RegExp.$1代表的就是第一个字段,RegExp.$2代表的是第二个字段。

举个例子,还拿刚才的电话号来说,他有分组,一个是区号,一个是本地号码,打印出来是一个数组,那么我们就可以通过RegExp.$1RegExp.$2捕获到这两个分组的值。

var tel = '0434-123456';   // 简单写一个电话号
var reg = /^(\d{3}|\d{4})-(\d{0,})$/  // 用()进行分组,区号可以是3位或4位,号码0~n个数值
reg.exec(tel)

console.log(RegExp.$1)   // "0434"
console.log(RegExp.$2)   // "123456"

正则修饰符

常用的修饰符有三个,分别为

i:忽略大小写
m:执行多次
g:全局匹配

用法:

如:

var num = /\d{3}/g

var num = new RegExp('\\d{3}', 'g');

这三个修饰符放在后边就可以。

仔细看会发现new构造出的正则中,\b,写成了\\b,这个不是错误,编辑器会转义成\

g举例说明:

var str = '小白,13987654321234567;小林,13898765433;小张,13798765432!!!';
var reg = /1\d{10}/g;

var arr = str.match(reg)
console.log(arr);  // ["13987654321", "13898765433", "13798765432"]

此时会打印出三个数值,如果不加全局修饰符g,会打印出一条。

举例中的match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

上述例子全局找到符合正则reg的的字段。

与此类似的方法还有:

  1. replace()
  2. split()
  3. search()

举一个split()例子:

普通js方法

'a b   c'.split(' '); // ['a', 'b', '', '', 'c']

空格也会打印出来,加正则看一下:

'a b   c'.split(/\s+/); // ['a', 'b', 'c']

再例如:

'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

以上就是今天介绍的正则验证,还有关于更多的知识,感兴趣的同学可以去官网查阅,正则的功能很强大,不仅局限于这些……

感兴趣的同学可以评论交流,或与我联系。

e-mail:avillin@163.com
weChat:VillinWeChat

若您有收获,也可请博主喝茶:
image

目录
相关文章
|
3天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`&lt;rect&gt;`元素的过程,奠定基础,助你进阶复杂项目。
|
7天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
17 4
|
10天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
9天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
18天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
18天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
18天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
19天前
|
JavaScript 数据安全/隐私保护
js 常用正则表达式【实用】
js 常用正则表达式【实用】
10 0
|
19天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
30 0
|
21天前
|
存储 JavaScript 前端开发