js正则表达式基本语法(精粹)

yizhihongxing

下面是关于JS正则表达式基本语法的完整攻略。

JS正则表达式基本语法

正则表达式的定义

正则表达式(Regular Expression)是一种可以用于字符串匹配的规则,它可以帮助我们快速地从字符串中提取需要的信息。

正则表达式语法

在JS中,我们可以使用RegExp对象来创建正则表达式,其基本语法如下:

var regExp = new RegExp(pattern, flags);

其中,pattern是正则表达式的模式,可以是字符串或RegExp对象,flags是一个标志位,用于控制正则表达式的匹配方式,其取值如下:

  • i:表示忽略大小写
  • g:表示全局匹配
  • m:表示多行匹配

举个例子,我们可以用正则表达式搜索一个字符串中所有的数字。其中,模式是\d,意思是匹配任意一个数字字符:

var str = "123abc456";
var regExp = /\d/g;
var result = str.match(regExp);
console.log(result);

输出结果为[ '1', '2', '3', '4', '5', '6' ],表示将所有的数字字符都匹配出来了。

正则表达式常用语法

元字符

元字符是正则表达式中的一些特殊字符,用于匹配字符串中的一些特殊符号以及一些特定的字符。常用的元字符有:

  • .:匹配任意一个字符
  • \d:匹配一个数字字符
  • \D:匹配一个非数字字符
  • \s:匹配一个空白字符(空格、制表符等)
  • \S:匹配一个非空白字符
  • \w:匹配一个单词字符(字母、数字、下划线)
  • \W:匹配一个非单词字符

举个例子,在一个字符串中查找所有的数字和下划线,可以使用以下正则表达式:

var str = "hello_123_world";
var regExp = /[\d_]/g;
var result = str.match(regExp);
console.log(result);

输出结果为[ '1', '2', '3', '_' ],表示数字和下划线都被匹配出来了。

量词

量词用于匹配一个或多个重复的字符或者子表达式。常用的量词有:

  • *:匹配前面的表达式0次或多次
  • +:匹配前面的表达式1次或多次
  • ?:匹配前面的表达式0次或1次
  • {n}:匹配前面的表达式恰好出现n次
  • {n,}:匹配前面的表达式至少出现n次
  • {n,m}:匹配前面的表达式至少出现n次,最多出现m次

举个例子,在一个字符串中查找所有的字母,可以使用以下正则表达式:

var str = "hello123world";
var regExp = /[a-zA-Z]+/g;
var result = str.match(regExp);
console.log(result);

输出结果为[ 'hello', 'world' ],表示所有的字母都被匹配出来了。

示例1

判断一个字符串是否为手机号格式:

function isMobilePhone(str) {
  var regExp = /^1[3456789]\d{9}$/;
  return regExp.test(str);
}

console.log(isMobilePhone("13512345678")); // true
console.log(isMobilePhone("12345678901")); // false

在上面的例子中,正则表达式/^1[3456789]\d{9}$/表示:

  • ^:表示开始位置
  • 1:表示字符串的第一个字符必须为数字1
  • [3456789]:表示第二个字符是3456789之间的任意一个数字
  • \d{9}:表示其后紧跟着9个数字字符
  • $:表示结束位置

因此,正则表达式可以精准地匹配手机号格式。

示例2

使用正则表达式对一个银行卡号进行脱敏处理:

function desensitization(str) {
  var regExp = /^(\d{4})(\d*)(\d{4})$/;
  return str.replace(regExp, function(match, p1, p2, p3) {
    return p1 + p2.replace(/\d/g, "*") + p3;
  });
}

console.log(desensitization("6228480402564890018")); // 6228***********0018

在上面的例子中,正则表达式/^(\d{4})(\d*)(\d{4})$/表示:

  • ^:表示开始位置
  • (\d{4}):表示匹配前4个数字字符,并把它们放入第一个捕获组中
  • (\d*):表示匹配0个或多个数字字符,并把它们放入第二个捕获组中
  • (\d{4}):表示匹配后4个数字字符,并把它们放入第三个捕获组中
  • $:表示结束位置

同时,我们使用了str.replace方法来替换字符串中的一部分字符,其中,第二个参数使用了一个匿名函数,用于把第二个捕获组中的所有数字字符都替换为星号*

总结

正则表达式是JS中非常重要的一部分,它可以帮助我们快速地从字符串中提取数据,并在输入框的校验中起到重要作用。掌握正则表达式的基本语法和常用技巧,可以更好地完成我们的编程任务。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js正则表达式基本语法(精粹) - Python技术站

(0)
上一篇 2023年5月19日
下一篇 2023年5月19日

相关文章

  • layui.js实现的表单验证功能示例

    下面是 “layui.js实现的表单验证功能示例” 的完整攻略。 一、什么是layui.js layui.js 是一款简易的前端 UI 解决方案,是由著名的前端开源组织“贤心之家”维护开发的。layui.js 主要包括丰富的UI组件和一套简单的前端模板。 在 layui.js 中,表单验证是其中之一的功能,该功能具有高度的可定制性和易用性。 二、表单验证的基…

    JavaScript 2023年6月10日
    00
  • JavaScript学习笔记之JS事件对象

    JavaScript学习笔记之JS事件对象 什么是JS事件对象 JavaScript事件对象(Event Object)是在事件被触发时由浏览器自动创建的对象,它包含了与事件相关的所有信息,我们可以通过JS事件对象来获取一些有用的信息,如事件类型、触发事件的元素、鼠标的位置等。 JS事件对象的属性 以下是JS事件对象常用的属性: type:事件类型,如”cl…

    JavaScript 2023年5月18日
    00
  • Ajax提交post请求案例分析

    Ajax提交Post请求的完整攻略 什么是Ajax提交Post请求? Ajax是Asynchronous JavaScript and XML(异步的Javascript和XML)的缩写。它是一种用于创建更快、更好、更友好的Web应用程序的Web开发方法。 使用AJAX可以在不重新加载整个Web页面的情况下更新页面的内容。其中,Ajax的一种常见用法是通过P…

    JavaScript 2023年6月11日
    00
  • js的回调函数详解

    JS的回调函数详解 在Javascript中,回调函数(callback function)指的是一个函数作为另一个函数的参数,然后在这个函数执行完后,再执行这个函数。回调函数经常用到异步编程中。 回调函数的定义 回调函数作为一种设计模式,是把一个函数作为参数传递给另一个函数,让这个函数在另一个函数完成后调用。 回调函数的作用 回调函数主要用于异步编程。当一…

    JavaScript 2023年5月27日
    00
  • JavaScript新增的两个原始数据类型详解(Record和Tuple)

    JavaScript新增的两个原始数据类型详解(Record和Tuple) 概述 在ES2021(ES12)中,JavaScript新增了两个原始数据类型:Record(记录)和Tuple(元组)。原始数据类型是指JavaScript内置数据类型,包括number、string、boolean、null、undefined、symbol和BigInt。 Re…

    JavaScript 2023年5月28日
    00
  • js正则格式化日期时间自动补0的两种解法

    下面是“js正则格式化日期时间自动补0的两种解法”的完整攻略。 步骤一:获取日期时间值 首先,我们需要获取日期时间的值,通常可以用 Date 对象。 const date = new Date(); 解法一:使用 String.prototype.padStart() String.prototype.padStart() 是 ES2017 中新增的方法,可…

    JavaScript 2023年5月27日
    00
  • Ext JS 4实现带week(星期)的日期选择控件(实战二)

    针对“Ext JS 4实现带week(星期)的日期选择控件(实战二)”这个话题,我可以给出以下的详细攻略。 1. 理解需求 在开始编写代码之前,首先要清楚需求是什么,即设计出一个带星期的日期选择控件。具体而言,这个控件需要包含以下几个元素: 日期选择器 显示星期的标签 可以选中日期的日历 响应用户选择的选中事件 2. 选择合适的 Ext JS 组件 在实现这…

    JavaScript 2023年6月10日
    00
  • 两行代码轻松搞定JavaScript日期验证

    以下是详细讲解“两行代码轻松搞定JavaScript日期验证”的完整攻略。 目标 我们的目标是通过JavaScript代码验证用户输入的日期是否符合指定的格式要求。 准备工作 在代码前,我们需要明确一下本次日期验证的需求,即用户输入的日期格式是什么样子的。以“YYYY/MM/DD”的格式为例,此时用户输入的日期应该满足以下要求: 年份必须为4位数,如2021…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部