4.规则 – 字符类（Character classes）

image.png

 const message = "fdaa4 22242asfasdf2242";

const re = /\d+/gi;

// \d -> 所有的数字 0~9
console.log(message.match(re)); //把所有的数字匹配出来，返回匹配出来的东西
// ['4', '22242', '2242']

5.规则 – 锚点（Anchors）

image.png

 const message = 'my name is why'

 if(message.startsWith("my")){
  console.log('以my开头')
  //如果把message里面的my改成My就没办法检查是不是My结尾的，因为这么做不能区分大小写
 }
 if(message.endsWith('why')){
  console.log('以why结尾')
 }

 // 正则: 锚点
 //符号 ^ 匹配文本开头；
// 符号 $ 匹配文本末尾；
if (/^my/i.test(message)) {
  console.log("以my开头");
}
if(/why$/i.test(message)){
  console.log('以why结尾')
}
const re = /^coder$/;
const info = "codaaaer";
console.log(re.test(info)); // false

词边界
词边界 \b 是一种检查，就像 ^ 和 $ 一样，它会检查字符串中的位置是否是词边界。
词边界测试 \b 检查位置的一侧是否匹配 \w，而另一侧则不匹配 “\w”
\w（“w” 来自 “word”） “单字”字符：拉丁字母或数字或下划线 _。

 const message = 'my name is why'

// 需求: name, name必须是一个单独的词
// 词边界

if(/\bname\b/i.test(message)){
  console.log("有name, name有边界")
}

// 词边界的应用
const infos = "now time is 11:56, 12:000 eat food, number is 123:456"

const timeRe = /\b\d\d:\d\d\b/ig
console.log(infos.match(timeRe))//['11:56', '12:00']

6.规则 – 转义字符串

image.png

// 定义正则: 对.转义
const message = 'abc.why'
const re = /./ig
console.log(message.match(re))//['a', 'b', 'c', '.', 'w', 'h', 'y']
//不转义的话，.点 . 是一种特殊字符类，它与 “除换行符之外的任何字符” 匹配

const re1 = /\./ig
console.log(message.match(re1))
//['.'] match只有在为g的时候才能返回数组

// 特殊: /
// const re2 = /\//

// 获取到很多的文件名
// jsx -> js文件
const fileNames = [
"abc.html",
"Home.jsx",
"index.html",
"index.js",
"util.js",
"format.js",];
// 获取所有的js的文件名(webpack)
// x? x是0个或1个
const jsfileRe = /\.jsx?$/;

// 1.for循环做法
const newArray = []
for (const item of fileNames) {
  if(jsfileRe.test(item)){
    newArray.push(item)
  }
}
console.log(newArray)
//['Home.jsx', 'index.js', 'util.js', 'format.js']

//2.filter高阶函数
const newfileName = fileNames.filter((currentValue, index) =>
  jsfileRe.test(currentValue)
)
console.log(newfileName)
//['Home.jsx', 'index.js', 'util.js', 'format.js']

7.集合（Sets）和范围（Ranges）

image.png

//手机号码规则
const phoneStarts = ["132", "130", "110", "120", "133", "155"];
const phoneStartRe = /^1[3456789]\d/
const filterPhone = phoneStarts.filter((phone) =>
    phoneStartRe.test(phone)
);
console.log(filterPhone);
//['132', '130', '133', '155']
const phoneNum = "13388855555";
const phoneRe = /^1[3-9]\d{9}$/;
//确切的位数：{5} /d{9} 代表着9个数字
console.log(phoneRe.test(phoneNum));//true

// 了解: 排除范围
// \d -> [0-9]
// \D -> [^0-9]

8.量词（Quantifiers）

image.png

//1.量词的使用
const re = /a{3,5}/gi;
  const message = "fdaaa2fdaaaaaasf42532fdaagjkljlaaaaf";
  const results = message.match(re)
  console.log(results)
  //(3) ['aaa', 'aaaaa', 'aaaa']

//2.常见的符号：+、？，*
// + ： {1,}
// ?: {0,1}
// *: {0,}

//3.案例：字符串的html元素, 匹配出来里面所有的标签
const htmlElement = "<div><span>哈哈哈</span><h2>我是标题</h2></div>";

const tagReg = /<\/?[a-z][a-z0-9]*>/ig

const res = htmlElement.match(tagReg)

console.log(res)
//(6) ['<div>', '<span>', '</span>', '<h2>', '</h2>', '</div>']

9.贪婪（ Greedy）和惰性（ lazy）模式

image.png

 // 1.贪婪模式/惰性模式
 const message = "我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》"
 //想把书名抽出来
const reg = /《.+》/ig
const result = message.match(reg)
console.log(result)
//['《黄金时代》和《沉默的大多数》、《一只特立独行的猪》']
//把所有书名放到一个数组里面了
/*
默认情况下的匹配规则是查找到匹配的内容后，会继续向后查找，一直找到最后一个匹配的内容
 这种匹配的方式，我们称之为贪婪模式（Greedy）


我们让他从贪婪变成懒惰模式
只要获取到对应的内容后，就不再继续向后匹配；
我们可以在量词后面再加一个问号 ‘?’ 来启用它；
所以匹配模式变为 *? 或 +?，甚至将 '?' 变为 ??
*/

 // 使用惰性模式
const reg1 = /《.+?》/ig
const result1 = message.match(reg1)
console.log(result1)
//(3) ['《黄金时代》', '《沉默的大多数》', '《一只特立独行的猪》']

10.捕获组（capturing group）

image.png

 // 1.捕获组
 const message = "我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》"

const nameReg = /《.+?》/ig
const result = message.match(nameReg)
console.log(result)
// ['《黄金时代》', '《沉默的大多数》', '《一只特立独行的猪》']

//如果我们想获取书名的文字
const nameReg1 = /《.+?》/ig
const result1 = message.matchAll(nameReg1)
for (const item of result1) {
  console.log(item);
 }
console.log(result1.next().value)
/*
['《黄金时代》', index: 10, input: '我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》', groups: undefined]
*/

//这个时候我们使用捕获组，在两个《之间给他括起来
const nameReg2 = /《(.+?)》/ig
const result2 = message.matchAll(nameReg2)

/*

) ['《黄金时代》', '黄金时代', index: 10, input: '我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》', groups: undefined]
*/
//索引1就是我们想要的内容

//如果我们分三个部分把他括起来
const nameReg3 = /(《)(.+?)(》)/ig
const result3 = message.matchAll(nameReg3)
console.log(result3.next().value)
console.log(result3.next().value[2])//沉默的大多数
/*
['《黄金时代》', '《', '黄金时代', '》', index: 10, input: '我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》', groups: undefined]
*/

//索引1,2,3就是我们括起来的内容

// 2.将捕获组作为整体
const info = "dfabcabcfabcdfdabcabcabcljll;jk;j";
//匹配连续的两个abc
//  /abc{2,}/  这个表示c有两个以上
const abcRe = /(abc){2,}/gi;
console.log(info.match(abcRe));
//(2) ['abcabc', 'abcabcabc']

11.捕获组的补充

image.png

 // 1.捕获组
 const message = "我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》"


const nameReg3 = /(《)(.+?)(》)/ig
const result3 = message.matchAll(nameReg3)
console.log(result3.next().value)
console.log(result3.next().value[2])
//如果括号特别多，记索引比较麻烦，这个时候我们使用命名组
const nameReg4 = /(《)(?<target>.+?)(?<test>》)/ig
const result4 = message.matchAll(nameReg4)
console.log(result4.next().value)
/*
0
:
"《黄金时代》"
1
:
"《"
2
:
"黄金时代"
3
:
"》"
groups
:
{target: '黄金时代'}
*/
//这个时候groups里面就有个对象，对象的属性名叫做target里面
/*
再加一个test，groups里面就有两个属性了
target
:
"黄金时代"
test
:
"》"
*/

  // 1.将捕获组作为整体
  const info = "dfabcabcfabcdfdabcabcabcljcbacballnbanba;jk;j"
  const abcRe = /(abc|cba|nba){2,}/ig
  console.log(info.match(abcRe))
    // ['abcabc', 'abcabcabc', 'cbacba', 'nbanba']