「🦆TSK的博客」

Appearance

On this page

正则 ​

⭐正则要么匹配位置，要么匹配值，正则是一种特殊的字符串

符号 ​

[] ​

方括号[ ]只能匹配一个字符，称为：字符类 或 字符簇。

其中连字号 - 在[ ]中使用时表示一个字符的范围。
即当在一组方括号里使用 ^ 时，它表示”非”或”排除”的意思，常常用来剔除某个字符。

| ​

| 的一侧代表左侧是一个整体(原子组),不加括号代表 左侧 / 右侧 其中一侧
若差异不在一个字符上，可以使用 |

js
let tel ="010-88"
console.log(/(010|020)\-\d{0,}/.test(tel));

// 代表的是 010 或者 020\-\d{0,}
console.log(/010|020\-\d{0,}/.test(tel));

010|020\-\d{0,}

(010|020)\-\d{0,}

如果想要准确匹配，需要加上单词边界

js
let r =  /(auto)|(scroll)/.test("autos") // true
 // 可以匹配 autos 或者 scroll
 const isMatch = /\b(auto|scroll)\b/.test("autos");
 console.log(isMatch);

match ​

js
// 要加上u
let hd = "houdunren2010.不断发布教程,加油"

// [ 'h','o','u','d','u','n','r','e','n','不','断','发','布','教','程','加','油' ]
console.log(hd.match(/\p{L}/gu)) /* 不匹配数值 */
// [.,]
console.log(hd.match(/\p{P}/gu)) /* 匹配标点符号 */
// [ '不', '断', '发', '布', '教', '程', '加', '油' ]
console.log(hd.match(/\p{sc=Han}/gu)) /* 匹配中文 */
// [ '不断发布教程,加油' ]
console.log(hd.match(/[^a-z0-9.]+/gu)) // 匹配非字母和数字

匹配中的内容 ​

表示 [^}]+ 满足[]中的元素出现一次以上

js
// 也可以 /\{\{([^}]\w+)\}\}/g
let reg = /\{\{([^}])+\}\}/g;

console.log(reg.test('{{}}'))

// 只要不是}任何其他字符
console.log(/[^}]/.test('}'))

单标签 ​

首先 \/? 转义 加上 可选,其次使用<\/\1>转义 \ 并且引用原来的匹配，最后使用 | 进行或操作

js
let r = /^<(\w+)\/?>(?:<\/\1>|)$/

console.log(r.test("<div></div>")); // true
console.log(r.test("<div>")); // true  由于 有 |，不加则为 false
// 只匹配不捕获 <\/\1>| 后面是空

匹配成对标签 ​

js
let reg = /<([^>]+)>.*?<\/\1>/g
console.log(reg.test('<title>regular expression</title>')) // true
console.log(reg.test('<p>laoyao bye bye</div>')) // false

单词首字母大写 ​

js
// my name is epeli
// ?: 表示匹配位置
const titleize = (str) => {
  return str.toLowerCase().replace(/(?:^|\s)\w/g, (c) => c.toUpperCase())
}

console.log(titleize('my name is epeli')) // My Name Is Epeli

// 拓展，横向转驼峰，例如base-act-tab => BaseActTab
// $0 代表整个匹配的文字，$1 代表第一个小括号
'base-act-tab'.replace(/(?:^|-)(\w)/g, ($0, $1) => $1.toUpperCase())

🚀加逗号 ​

?= 现行断言运算符,相当于我站在这个位置，看我后面的元素是否能匹配上，如果匹配上,那就找到了这个位置

比如 1234 匹配 (?=\B(\d{3})+$)，从第一个位置即 1 前面的那个位置，判断是否满足条件，然后从 1 查看是否满足,因为前面不是 \d(?=\B(\d{3})+$) 所以无法匹配，到 1 后面的位置，刚好匹配

匹配的位置在于不能是边界,同时后面是3个数字到结束,6个数字到结束的那个位置

js
function formatPrice(price) {
  return String(price).replace(/(?=\B(\d{3})+$)/g, ',');
}

console.log(formatPrice(99999999)) // 99,999,999

匹配位置

js
let n = "1234";
// 匹配 n 的每个字符的位置
let  r = /?=\d/g
let x = n.match(r)
 console.log(x) // [ '', '', '', '' ]

正则断言 ​

其实就是一个锚点，判断条件满足，锚点就指向这个位置，不满足就指向下一个位置

先行断言（Lookahead Assertion）是一种正则表达式的构造，在匹配过程中用来判断某个位置后面是否为特定的模式，而不会实际匹配（消费）这个模式。

先行断言分为正向先行断言（positive lookahead assertion）和负向先行断言（negative lookahead assertion）。

  1. 先行断言

exp1(?=exp2) 查找 exp2 前面的 exp1

  1. 后行断言

(?<=exp2) exp1,查找 exp2 后面的 exp1

  1. 正向否定查找

exp1(?!exp2),查找后面不是 exp2 的 exp1

  1. 反向否定查找

(?<!exp2)exp1 查找前面不是 exp2 前面的 exp1