正则

正则语法规则和实际案例

语法规则

\d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。
\D就是[^0-9]。表示除数字外的任意字符。
\w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。
\W是[^0-9a-zA-Z_]。非单词字符。
\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。
\S是[^ \t\v\n\r\f]。 非空白符。
.就是[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号...中的每个点，都可以理解成占位符，表示任何类似的东西。

{m,} 表示至少出现m次。{m} 等价于{m,m}，表示出现m次。
? 等价于{0,1}，表示出现或者不出现。记忆方式：问号的意思表示，有吗？
+ 等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。
* 等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

^（脱字符）匹配开头，在多行匹配中匹配行开头。
$（美元符号）匹配结尾，在多行匹配中匹配行结尾。
\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置。
\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的
(?=p)，其中p是一个子模式，即p前面的位置。比如(?=l)，表示'l'字符前面的位置。
(?!p)就是(?=p)的反面意思。

1.字面量，匹配一个具体字符，包括不用转义的和需要转义的。比如a匹配字符"a"，又比如\n匹配换行符，又比如\.匹配小数点。
2.字符组，匹配一个字符，可以是多种可能之一，比如[0-9]，表示匹配一个数字。也有\d的简写形式。另外还有反义字符组，表示可以是除了特定字符之外任何一个字符，比如[^0-9]，表示一个非数字字符，也有\D的简写形式。
3.量词，表示一个字符连续出现，比如a{1,3}表示“a”字符连续出现3次。另外还有常见的简写形式，比如a+表示“a”字符连续出现至少一次。
4.锚点，匹配一个位置，而不是字符。比如^匹配字符串的开头，又比如\b匹配单词边界，又比如(?=\d)表示数字前面的位置。
5.分组，用括号表示一个整体，比如(ab)+，表示"ab"两个字符连续出现多次，也可以使用非捕获分组?:ab)+。
6.分支，多个子表达式多选一，比如abc|bcd，表达式匹配"abc"或者"bcd"字符子串。反向引用，比如\2，表示引用第2个分组。

1.转义符 \
2.括号和方括号 (...)、(?:...)、(?=...)、(?!...)、[...]
3.量词限定符 {m}、{m,n}、{m,}、?、*、+
4.位置和序列 ^ 、$、 \元字符、 一般字符
5. 管道符（竖杠）|

通用案例

/**
 * 高亮检索
 */
const content = prompt('请输入检索内容');
const reg = new RegExp(content, 'g');
const app = document.getElementById('juejin');
app.innerHTML = app.innerHTML.replace(reg, (res) => {
  return `<span style="color: red;">${res}</span>`;
});

/**
 * [] 和 () 的 区别
 * */
const numbers = '12343121';
const res1 = numbers.match(/[34]/);
const res2 = numbers.match(/(34)/);
console.log('res1', res1);
const str = '12345673234';
const res3 = str.match(/[24]/g);
console.log('res3', res3);

/**
 * 检索网址 ?代表有吗，有或者没有都可以
 */
const url = 'https://www.master.com1';
const reg = /^https?:\/\/www\.\w+\.com$/;
const res1 = reg.test(url);
console.log('res1', res1);

/**
 * g 代表全局匹配  + 代表至少一个 i代表不区分大小写 m 代表多行匹配
 */
const str = 'a123qer987';
const reg1 = /\d/;
const res1 = str.match(reg1);
console.log('res1', res1); // 默认懒惰模式 结果为 1

const reg2 = /\d/g;
const res2 = str.match(reg2);
console.log('res2', res2); // 全局匹配 ['1', '2', '3', '9', '8', '7']

const reg3 = /\d+/g;
const res3 = str.match(reg3);
console.log('res3', res3); // 全局匹配 ['123', '987']

/**
 * 匹配时间 以24小时制为例。
 */
const str = '7:9';
const reg = /^([01]?[0-9]|[2]?[0-3]):[0-5]?[0-9]$/g;
const res1 = reg.test(str);
console.log('res1', res1);

var reg = /<h([0-6])>\w+<\/h([0-6])>/g;
var str = '<h5>replace</h6>';
var res = str.replace(reg, (p, p1, p2) => {
  /**
   * p 全部字符
   * p1 第一个搜索结果 5
   * p2 第二个搜索结果 6
   */
  console.log('data', p, p1, p2);
  return '';
});

var re = /(\w+)\s(\w+)/;
var str = 'John Smith';
var res = str.replace(re, '$2, $1');
// Smith, John
console.log(res);

// 贪婪和惰性匹配， 通过在量词后面加个问号就能实现惰性匹配，因此所有惰性匹配情形如下：
{m,n}?
{m,}?
??
+?
*?

其他案例

function run() {
  var re = /(\w?)\s(\w?)/;
  // var re = /(\w+)\s(\w+)/;
  var str = 'John Smith';
  const res = str.match(re);
  console.info('res', res);
}

function run1() {
  const str = '2024-12-10+2025-11-15';
  const regex = /(\d{4})-(\d{2})-(\d{2})/g;
  // const res = str.match(regex);
  // console.info('res', res);
  str.replace(regex, (...arg) => {
    console.info('arg', arg);
  });
}

function run2() {
  const str = '<span>{{var1}}</span><div>{{var2}}</div>';
  const reg = /\{\{(.*?)\}\}/g;
  const match = str.match(reg); // 得到['{{var1}}', '{{var2}}']
  const varRes = match.map((item) => {
    reg.lastIndex = 0; // exec方法每次使用后会将lastIndex值设为匹配后的index，更换字符串需要手动重置
    reg.exec(item); // [ '{{var1}}', 'var1', index: 0, input: '{{var1}}', groups: undefined ]
    return RegExp.$1; // RegExp.$1用于保存最近一次exec或test产生的匹配结果中，括号内的内容
  });

  console.log(varRes); // ['var1', 'var2']
}

function run3() {
  // 比如把"12345678"，变成"12,345,678"。
  const str = '12345678';
  const reg = /(\d{3})$/g;
  const match = str.match(reg);
  const s = str.replace(reg, (res) => {
    console.info('res', res);
    return ',' + res;
  });
  console.info('str', s);
}

function run4() {
  const str = ' 1234 5678 99 ';
  const s = str.replace(/^\s*(.*?)\s*$/g, (...arg) => {
    console.info('arg', arg);
  });
}

正则 ​

语法规则 ​

通用案例 ​

其他案例 ​

正则

语法规则

通用案例

其他案例