javascript 正则表达式语法和API知识点整理

最新推荐文章于 2024-07-08 22:26:38 发布

胖鹅68

最新推荐文章于 2024-07-08 22:26:38 发布

阅读量350

点赞数 1

分类专栏： Html5、JavaScript、ES6

本文链接：https://blog.csdn.net/hbiao68/article/details/119319203

版权

Html5、JavaScript、ES6 专栏收录该内容

82 篇文章 3 订阅

订阅专栏

一、参考资料

二、语法介绍

创建正则表达式

没有标志的搜索

var re = /ab+c/;

脚本加载后，正则表达式字面量就会被编译。当正则表达式保持不变时，使用此方法可获得更好的性能。

var re = new RegExp("ab+c");

在脚本运行过程中，用构造函数创建的正则表达式会被编译。如果正则表达式将会改变，或者它将会从用户输入等来源中动态地产生，就需要使用构造函数来创建正则表达式。

有标志的高级搜索

var re = /pattern/flags;

例子：

var re = /\w+\s/g;
var re = new RegExp("\\w+\\s", "g");
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

等价于

var re = new RegExp("pattern", "flags");

例子：

var re = new RegExp("\\w+\\s", "g");
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

// ["fee ", "fi ", "fo "]

修饰符

i 执行对大小写不敏感的匹配。
g 执行全局匹配。
m 执行多行匹配。
s 允许 . 匹配换行符。
u 使用unicode码的模式进行匹配。
y 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

特殊字符

特殊符号
- \ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n，特殊符号 ( 变为字符 (。
- ^ 匹配字符串起始位置。
- $ 匹配字符串结束位置。
- - 匹配前面的子表达式零到多次。
- - 匹配前面的子表达式一到多次。
- ? 匹配前面的子表达式零到一次。
- . 匹配除换行符外任何单个字符。换行符为 \n 和 \r。
匹配次数
- {n} 匹配前面的子表达式的n个，如 o{2} 能够匹配 food 不能匹配 god。
- {n,} 至少匹配n个前面的子表达式，如 o{2,} 能够匹配 fooooood 不能匹配 god。
- {n, m} 至少匹配n次，至多匹配m次。
匹配范围
- x|y 匹配 x 或 y，如 jack|rose 就可以匹配到 jack 和 rose 两个字符串。
- [xyz] 匹配方括号内任意字符。
- [^xyz] 反向字符集，匹配除方括号内字符的任意字符。
- [0-9] 范围匹配，匹配0-9范围内任意字符。
匹配种类
- \w 查找单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。
- \W 查找非单词字符。
- \d 查找数字字符。
- \D 查找非数字字符。
- \s 查找空白字符。空白字符包括空格、\n、\f、\r、\t、\v。
- \S 查找非空白字符。
- \b 匹配单词边界，通常匹配单词开头和结尾。如 /\bcd/ 匹配 cdkey。
- \B 匹配非单词边界。如 /\Bcd/ 匹配 abcd。
- \O 查找 NULL 字符。
- \n 换行符。
- \f 换页符。
- \r 回车符。
- \t 制表符。
- \v 垂直制表符。
分组
- (x) 捕获括号，匹配并记住匹配项。
- (?:x) 非捕获括号，匹配并不记住匹配项。如 /(?:foo){1,2}/，这里将 foo 作为一个整体进行匹配1到2次。
- x(?=y) 匹配x仅仅在x后面跟y的时候。?=y 表示字符串末尾是y。
- x(?!y) 匹配x仅仅在x后面不跟着y的时候。?!y 表示字符串末尾不是y。

RegExp API 介绍

regexObj.test(str)

如果正则表达式与指定的字符串匹配，返回true；否则false。

let str = 'hello world!';
let result = /^hello/.test(str);
console.log(result);
// true

regexObj.exec(str)

如果匹配失败，exec() 方法返回 null，并将 lastIndex 重置为 0 。

值匹配一次成功

如果匹配成功，exec() 方法返回一个数组（包含额外的属性 index 和 input ，参见下方表格），并更新正则表达式对象的 lastIndex 属性。完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应正则表达式内捕获括号里匹配成功的文本

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
// result结果
// [
// 0: "Quick Brown Fox Jumps"
// 1: "Brown"
// 2: "Jumps"
// groups: undefined
// index: 4
// input: "The Quick Brown Fox Jumps Over The Lazy Dog"
// length: 3
// ]
// re.lastIndex 值为 25

全局匹配，多次成功（lastIndex类似于游标）

当正则表达式使用 “g” 标志时，可以多次执行 exec 方法来查找同一个字符串中的成功匹配。当你这样做时，查找将从正则表达式的 lastIndex 属性指定的位置开始。（test() 也会更新 lastIndex 属性）。注意，即使再次查找的字符串不是原查找字符串时，lastIndex 也不会被重置，它依旧会从记录的 lastIndex 开始

var myRe = /ab*/g;
var str = 'abbcdefabh';
var myArray;
while ((myArray = myRe.exec(str)) !== null) {
  var msg = 'Found ' + myArray[0] + '. ';
  msg += 'Next match starts at ' + myRe.lastIndex;
  console.log(msg);
}

等价于

var myRe = /ab*/g;
var str = 'abbcdefabh';
// 第一次 myRe.lastIndex 为0
var myArray = myRe.exec(str)
var msg = 'Found ' + myArray[0] + '. ';
msg += 'Next match starts at ' + myRe.lastIndex;
console.log(msg);
console.log('myRe.lastIndex', myRe.lastIndex);
// 第二次 myRe.lastIndex 为3
var myArray = myRe.exec(str)
var msg = 'Found ' + myArray[0] + '. ';
msg += 'Next match starts at ' + myRe.lastIndex;
console.log(msg);

三、分组匹配（正则表达式中有括号）

规则说明

(x) 捕获括号，匹配并记住匹配项。
(?:x) 非捕获括号，匹配并不记住匹配项。如 /(?:foo){1,2}/，这里将 foo 作为一个整体进行匹配1到2次。
x(?=y) 匹配x仅仅在x后面跟y的时候。?=y 表示字符串末尾是y。
x(?!y) 匹配x仅仅在x后面不跟着y的时候。?!y 表示字符串末尾不是y。

分组匹配

匹配到分组的值，会在全局变量RegExp.$1 RegExp.$2 …

const reg = /(https|http):\/{2}w{3}\.(baidu|google|mi|apeland)\.(com|cn)/
const result = reg.test('https://www.baidu.com')
console.log(result) // true
console.log(RegExp.$1) // https
console.log(RegExp.$2) // baidu
console.log(RegExp.$3) // com

分组不匹配

const reg = /(?:https|http):\/{2}w{3}\.(baidu|google|mi|apeland)\.(com|cn)/
const result = reg.test('https://www.baidu.com')
console.log(result) // true
console.log(RegExp.$1) // baidu
console.log(RegExp.$2) // com
console.log(RegExp.$3) //

四、String API介绍

str.match(regexp)

参考MDN

该方法与 regexObj.exec(str) 类似

方法检索返回一个字符串匹配正则表达式的结果。

匹配一个结果
结果说明： 匹配第一个匹配到的值，如果里面有分组（括号），中间返回所有分组的结果，最后两个参数分别是索引和原始字符串

var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);

console.log(found);

// logs [ 'see Chapter 3.4.5.1',
//        'Chapter 3.4.5.1',
//        '.1',
//        index: 22,
//        input: 'For more information, see Chapter 3.4.5.1' ]

// 'see Chapter 3.4.5.1' 是整个匹配。
// 'Chapter 3.4.5.1' 被'(chapter \d+(\.\d)*)'捕获。
// '.1' 是被'(\.\d)'捕获的最后一个值。
// 'index' 属性(22) 是整个匹配从零开始的索引。
// 'input' 属性是被解析的原始字符串。

匹配全局（多个）结果
结果说明：匹配所有匹配的字符串，返回一个数组

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);

console.log(matches_array);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

str.search(regexp)

返回第一个满足条件的匹配结果在整个字符串中的位置，如果没有任何匹配，则返回-1

function SearchDemo(){
   var r, re;                   // 声明变量。
   var s = "The rain in Spain falls mainly in the plain.";
   re = /falls/i;            // 创建正则表达式模式。
   r = s.search(re);            // 查找字符串。
   alert(r);
}

str.replace(regexp|substr, newSubStr|function)

参考MDN

参数说明

regexp (pattern) 一个RegExp 对象或者其字面量

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
// oranges are round, and oranges are juicy.
console.log(newstr);

substr (pattern) 一个将被 newSubStr 替换的字符串
newSubStr (replacement) 用于替换掉第一个参数在原字符串中的匹配部分的字符串
function (replacement) 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
// p1 p2  p3 分别是正则的三个分组
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%