处理“文本搜索和替换” 的工具-RegExp

RegExp 是js中用于正则表达式的内置对象,它提供了一个强大的工具来匹配、搜索、替换和提取字符串中的特定模式。处理"文本搜索和替换" 的工具-RegExp

一、常用方法:
1.test():测试是否匹配 返回true/false
ts 复制代码
const regex = /abc/;
console.log(regex.test('abcde')); // true
2.exex():返回匹配详情 返回匹配的数组或null,包括索引、输入等信息。
ts 复制代码
const regex = /(\d+)/;
const result = regex.exec('Age: 25');
console.log(result);
3.match():字符串方法,返回匹配结果
ts 复制代码
1.'abc'.match(/a/) 对象(包含匹配信息) {0: 'a', index: 0, input: 'abc', length: 1}
2.`'abc'.match(/a/g)` 数组['a'] 
3.`'abc'.match(/z/g)`null(没有匹配)null
ts 复制代码
const str = 'Hello world';
const regex = str.match(/l/g);
console.log(regex);
4.replace():替换匹配内容
ts 复制代码
const result = "Hello".replace(/H/g, "h");
console.log(result);

// 或者一行搞定:
console.log("Hello".replace(/l/g, "L"));
5.search():返回第一个匹配的位置
ts 复制代码
console.log('Hello'.search(/l/));
console.log('abc'.search(/x/));
console.log('Apple'.search(/apple/));
console.log('Apple'.search(/apple/i));
console.log('Find me'.search(/me/));
6.split():用正则分割字符串
ts 复制代码
// 1. 用字符串作为分隔符(更常见)
console.log('a,b,c'.split(','));

// 2. 按多个分隔符拆分(正则更强大)
console.log('a,b;c|d'.split(/,|;|\|/));

// 3. 按空白字符拆分(空格、制表符等)
console.log('a b  c'.split(/\s+/));

// 4. 拆分字符串为单个字符
console.log('hello'.split(''));
二、最核心、最常用的元字符和语法。
1..匹配任意单个字符(除换行符)

含义:匹配除了换行符\n之外的任意一个字符。

加上s标志:/./s可以连换行符也匹配。

ts 复制代码
console.log('a'.match(/./)); 
console.log('1'.match(/./));
console.log('\n'.match(/./));
console.log('\n'.match(/./s));
2.\d 匹配一个数字(0-9)
ts 复制代码
console.log('a1b2c3'.match(/\d/g));
console.log('Phone: 123'.match(/\d+/));
3.\w匹配一个"单词字符"

包括:a-z、A-Z、0-9和_

不包括:空格、标点、中文等

ts 复制代码
console.log('a_b 123!'.match(/\w/g));
4.\s匹配一个空白字符

包括:空格、制表符\t、换行符\n、回传\r

ts 复制代码
console.log('a b'.match(/\s/));
console.log('a\tb'.match(/\s/));
console.log('a\nb'.match(/\s/));
console.log('hello world'.split(/\s+/));
5.^匹配字符串的开头
ts 复制代码
console.log("Hello".match(/^H/)); // ['H'](以 H 开头 → 匹配)
console.log("hello".match(/^H/)); // null(不区分大小写时失败)
console.log("Apple".match(/^B/)); // null(不是 B 开头)
6.$匹配字符串的结尾
ts 复制代码
console.log('Hello'.match(/o$/));   // ['o'](以 o 结尾)
console.log('Hello'.match(/e$/));   // null(不以 e 结尾)
console.log('file.txt'.match(/\.txt$/)); // ['.txt'](以 .txt 结尾)

^$常常一起用:

ts 复制代码
console.log(/^\d{3}$/.test("123")) //true
7.* 前一项出现0次或多次

可以是0次、1次、多次

ts 复制代码
console.log('a'.match(/ab*/));
console.log('abb'.match(/ab*/));
console.log('ac'.match(/ab*/));
8.+ 前一项出现1次或多次

至少出现1次(不能是0次)

ts 复制代码
console.log('a'.match(/ab*/)); 
console.log('a'.match(/ab+/));
console.log('abb'.match(/ab+/)); 
9.?前一项出现0次或1次
ts 复制代码
console.log('color'.match(/colou?r/));  // ['color'](u 出现 0 次)
console.log('colour'.match(/colou?r/)); // ['colour'](u 出现 1 次)
console.log('colouur'.match(/colou?r/)); // null(u 出现 2 次,不匹配)
10.{n} 前一项恰好出现n次
ts 复制代码
console.log('aaa'.match(/a{3}/));     // ['aaa']
console.log('aa'.match(/a{3}/));      // null(不够3个)
console.log('aaaa'.match(/a{3}/));    // ['aaa'](匹配前3个)
11.[abc] 字符类:匹配a、b 或 c 中的任意一个
ts 复制代码
// 范围写法:
/[a-z]/   // 小写字母
/[A-Z]/   // 大写字母
/[0-9]/   // 数字(等价于 \d)
/[^abc]/  // 匹配**不是** a、b、c 的字符(^ 在 [ ] 内表示"非")
ts 复制代码
console.log("cat".match(/[abc]/g)); // ['c', 'a']
console.log("dog".match(/[abc]/)); // null(没有 a、b、c)
12.(abc)分组捕获
  • abc当作一个整体
  • 可以用 +*等修饰符整个组
  • 还可以提取匹配内容(捕获)
ts 复制代码
    console.log('abcabc'.match(/(abc)+/)); 
    // 匹配整个 'abcabc',捕获组是 'abc'

    // 示例:提取年月日
    const result = '2025-03-14'.match(/(\d{4})-(\d{2})-(\d{2})/);
    console.log(result);
    // [
    //   '2025-03-14',  ← 完整匹配
    //   '2025',        ← 第1个捕获组:年
    //   '03',          ← 第2个捕获组:月
    //   '02',          ← 第3个捕获组:日
    //   index: 0,
    //   input: '2025-03-14'
    // ]
相关推荐
程序员爱钓鱼3 分钟前
Node.js 编程实战:测试与调试 - 单元测试与集成测试
前端·后端·node.js
码界奇点9 分钟前
基于Vue.js与Element UI的后台管理系统设计与实现
前端·vue.js·ui·毕业设计·源代码管理
时光少年16 分钟前
Android KeyEvent传递与焦点拦截
前端
踢球的打工仔22 分钟前
typescript-引用和const常量
前端·javascript·typescript
OEC小胖胖24 分钟前
03|从 `ensureRootIsScheduled` 到 `commitRoot`:React 工作循环(WorkLoop)全景
前端·react.js·前端框架
时光少年26 分钟前
ExoPlayer MediaCodec视频解码Buffer模式GPU渲染加速
前端
hxjhnct26 分钟前
Vue 自定义滑块组件
前端·javascript·vue.js
华仔啊28 分钟前
JavaScript 中如何正确判断 null 和 undefined?
前端·javascript
weibkreuz29 分钟前
函数柯里化@11
前端·javascript·react.js
king王一帅37 分钟前
Incremark 0.3.0 发布:双引擎架构 + 完整插件生态,AI 流式渲染的终极方案
前端·人工智能·开源