一篇文章搞懂JavaScript正则表达式之方法

2023-12-10前端开发
8

下面是“一篇文章搞懂JavaScript正则表达式之方法”的完整攻略:

什么是正则表达式

正则表达式(Regular Expression,regex,RegExp)是一种用来进行字符串匹配的工具。它通过一些特定字符的组合和描述规则来匹配文本中的字符序列。JavaScript 中使用正则表达式同样非常方便。

创建正则表达式

在 JavaScript 中,有两种常见的方式来创建正则表达式:

  1. 字面量方式

使用斜杠(/)包括正则表达式的模式,后面可以跟一些修饰符。例如:

let pattern = /hi/gi;

这个正则表达式的模式是“hi”,修饰符“gi”表示全局匹配和忽略大小写。

  1. 构造函数方式

使用 RegExp 对象来创建正则表达式,传入参数是正则表达式的模式和修饰符。例如:

let pattern = new RegExp("hi", "gi");

匹配字符串

要使用正则表达式对字符串进行匹配,可以使用 String 对象的 match() 方法。它会返回一个数组,数组的元素就是匹配到的结果。例如:

let pattern = /hi/gi;
let str = "Hi,How are you? hi";
let result = str.match(pattern);
console.log(result);

结果输出:["Hi", "hi"]

正则表达式元字符和特殊字符

正则表达式的基础是元字符和特殊字符。其中,元字符(也称为原义字符)代表了自身,特殊字符则有特殊含义,并不代表自身。下面列出一些常见的元字符和特殊字符:

字符 说明
. 匹配除了换行符以外的任意字符
\w 匹配任意字母、数字、下划线
\W 匹配除了字母、数字、下划线以外的任意字符
\d 匹配任意数字
\D 匹配除了数字以外的任意字符
\s 匹配任意空白字符(包括空格、制表符和换行符等)
\S 匹配除了空白字符以外的任意字符
^ 匹配字符串的开头
$ 匹配字符串的结尾
\b 匹配单词的边界
\B 匹配不在单词边界的位置

贪婪匹配和非贪婪匹配

在正则表达式中,*、+ 和 ? 这三个元字符都是贪婪匹配的,会尽可能多地匹配字符。如果想要改成非贪婪匹配,需要在这三个元字符后面加上 ?,例如:

let str = "aa<a>bb<a>cc";
console.log(str.match(/<.+?>/g));

结果输出:["<a>", "<a>"]

示例

例子一

假设有一个电话号码格式为 0517-88888888(其中 0517 代表区号,8 个数字表示电话号码),要从一段文本中提取出这样格式的电话号码,可以使用正则表达式。

let str = '这是我的电话号码:0517-88888888,请联系我!';
let pattern = /\d{4}-\d{8}/;
let result = str.match(pattern);
console.log(result);

结果输出:["0517-88888888"]

例子二

假设有一段文本,其中有多个人名,要从中根据一定的规则提取人名前的称呼,例如:

李小明先生、王小丽女士,您好!

可以使用正则表达式 /[\u4e00-\u9fa5]{2,4}(?=先生|女士)/g 来匹配。

其中 [\u4e00-\u9fa5] 匹配汉字,{2,4} 表示匹配两到四个汉字,(?=先生|女士) 表示仅当后面有“先生”或“女士”之一的时候才匹配。

let str = '李小明先生、王小丽女士,您好!';
let pattern = /[\u4e00-\u9fa5]{2,4}(?=先生|女士)/g;
let result = str.match(pattern);
console.log(result);

结果输出:["李小明", "王小丽"]

以上就是“一篇文章搞懂JavaScript正则表达式之方法”的完整攻略,希望可以帮助到你。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161