正则表达式

正则表达式(Regular Expression,简称regex或regexp)是一种用于匹配字符串中字符组合的模式 。在编写复杂的字符串处理逻辑时,正则表达式提供了强大的工具,使得文本搜索、文本替换、数据验证等操作变得更加简便和高效。以下是正则表达式的详细讲解,包括基本概念、常用符号和一些高级用法。

基本概念

  • 字符:正则表达式中的字符可以是字母、数字、标点符号以及特殊字符。
  • 元字符 :在正则表达式中有特殊含义的字符,如.*+?^、`$

(续)和\等。

  • 模式:由字符和元字符组成的字符串,用于定义搜索模式。

常用符号和语法

字符匹配
  • 普通字符 :如 ab1A 等,直接匹配对应的字符。
  • 点号 . :匹配除换行符 \n 以外的任何单个字符。
  • 字符类 [] :匹配方括号内的任意一个字符。例如,[abc] 匹配 abc
    • 字符范围 :如 [a-z] 匹配任何小写字母,[0-9] 匹配任何数字。
    • 排除字符类 [^] :如 [^a-z] 匹配任何不是小写字母的字符。
预定义字符类
  • \d:匹配任何数字,相当于 [0-9]
  • \D:匹配任何非数字字符,相当于 [^0-9]
  • \w:匹配任何单词字符(字母、数字、下划线),相当于 [A-Za-z0-9_]
  • \W:匹配任何非单词字符,相当于 [^A-Za-z0-9_]
  • \s:匹配任何空白字符,包括空格、制表符、换页符等。
  • \S:匹配任何非空白字符。
量词
  • *:匹配前面的字符零次或多次。
  • +:匹配前面的字符一次或多次。
  • ?:匹配前面的字符零次或一次。
  • {n}:匹配前面的字符恰好 n 次。
  • {n,}:匹配前面的字符至少 n 次。
  • {n,m}:匹配前面的字符至少 n 次,至多 m 次。
边界匹配
  • ^:匹配字符串的开头。
  • $:匹配字符串的结尾。
  • \b:匹配单词边界。
  • \B:匹配非单词边界。
分组和捕获
  • 圆括号 () :用于分组,将括号内的内容视为一个整体。也用于捕获匹配的内容。
    • 例如,(abc)+ 匹配 abcabcabc 等。
  • 反向引用 :使用 \1, \2 等来引用分组捕获的内容。
    • 例如,(\d)\1 匹配两个连续相同的数字,如 1122
或操作符 |
  • a|b:匹配 ab
    • 例如,cat|dog 匹配 catdog

高级用法

零宽断言
  • 正向先行断言 (?=...) :匹配某个位置后面是指定的内容,但不包含在匹配结果中。
    • 例如,\d(?=px) 匹配 3px 中的 3
  • 负向先行断言 (?!...) :匹配某个位置后面不是指定的内容。
    • 例如,\d(?!px) 匹配 3em 中的 3
  • 正向后行断言 (?<=...) :匹配某个位置前面是指定的内容,但不包含在匹配结果中。
    • 例如,(?<=\$)\d+ 匹配 $100 中的 100
  • 负向后行断言 (?<!...) :匹配某个位置前面不是指定的内容。
    • 例如,(?<!\$)\d+ 匹配 100 而不匹配 $100 中的 100

常见示例

  1. 匹配电子邮件地址

    /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
    
  2. 匹配电话号码

    /^(\+\d{1,3}[- ]?)?\d{10}$/
    
  3. 匹配网址

    /^(https?:\/\/)?(www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}\/?$/
    

在Javascript中的使用

// 创建正则表达式
let regex = /hello/;
let regex2 = new RegExp('hello');

// 测试字符串是否匹配正则表达式
console.log(regex.test('hello world')); // true

// 匹配字符串
let str = 'hello world';
let result = str.match(regex);
console.log(result); // ['hello']

// 替换字符串中的匹配部分
let newStr = str.replace(regex, 'hi');
console.log(newStr); // 'hi world'

⭐⭐附加⭐⭐

10分钟快速掌握正则表达式_哔哩哔哩_bilibili

var reg = /正则表达式/修饰符;

修饰符:

  • i: ignoreCase, 匹配忽视大小写
  • m: multiline , 多行匹配
  • g: global , 全局匹配
限定符
或运算符
  • (ab|cd) ab或cd
  • a (dog|cat) a dog 或a cat
字符类
  • [a-c] [a-c] a或b或c
  • [a-zA-Z0-9]匹配大小写字母以及数字
  • [^0-9]非数字 此处^表示非
元字符

|------|------------------------------------------------------------|
| [] | var reg = /[abc]/;//匹配abc任意一个字符 var reg1 = /abc/;//匹配abc |
| ^ | var reg1 = /[^abc]/;//匹配abc之外的字符 |
| ^ | var reg = /^abc/;//匹配以abc开头的字符 |
| $ | var reg = /abc$/;//匹配以abc结尾的字符 |
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线或汉字 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |

相关推荐
理想不理想v10 分钟前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记24 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜25 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=25 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
web行路人2 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0012 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js