前言
本篇文章主要接JS正则第一篇字符篇，有什么问题可以在评论区戳我，废话不多说直接上干货
⚠️字符篇入口：juejin.cn/post/704775…
开始
匹配位置。先说明一下什么是位置，看下面例子
let str = 'abcde';// |a|b|c|d|e| 这些 | 都是在字符中的位置
那么我们主要就是根据上面的位置做一些事情
在正则中有6个常用的字符
^ $ \b \B (?=p) (?|p)，下面来依次介绍一下
^匹配字符开头的位置
$匹配字符结尾的位置，看下面的例子
let str1 = 'javaScript';
console.log(str1.replace(/^|$/g, '🐻')) //🐻javaScript🐻
\b匹配单词边界，具体就是\w和\W之间的位置，包括\w和^之间的位置和\w到$之间的位置，来看下面的例子
let str2 = '{node}.(js)'
console.log(str2.replace(/\b/g, '🐅')) //{🐅node🐅}.(🐅js🐅)'
\B是\b反面的意思，在一段字符中除了\b其他都是\B
let str3 = '{node}.(js)'
console.log(str3.replace(/\B/g, '🐅')) //🐅{n🐅o🐅d🐅e}🐅.🐅(j🐅s)🐅'
(?=a)匹配a前面的位置，看下面的例子（⚠️注意a是个测试用例，其他什么字符都可以）可以看到结果是把a前面的位置替换成了风清扬
let str4 = 'cba'
console.log(str4.replace(/(?=a)/, '风清扬'))//cb风清扬a
(?!a)是与上面的(?=a)相反的意思，看下面的例子，结果是除了c和b前面的位置和都有风清扬，那就是说明(?=a)只匹配a前面的位置，(?!a)除了a前面的位置其他位置都匹配
let str5 = 'cba'
console.log(str5.replace(/(?!a)/g, '风清扬'))//风清扬c风清扬ba风清扬
实际案例
实现一个数字千分位分割，可以分为两步进行，看下面例子
1.第一步在每三位数字前面需要加,
let regp1 = /(?=(\d{3})+$)/g
/**
* 1.?=(\d{3})匹配三个数字之前的位置
* 2.?=(\d{3}+$)匹配以三个数字为一组结尾的数据
*/
console.log(str6.replace(regp1, ',')) //,111,234,567,890
第一步完成之后可以看到第一位也加上了,，那怎么去掉第一个的,呢，也很简单看下面第二步
2.目前最开始的位置也加了,我们要把它给去掉需要在原来的位置加上(?!^)
let regp2 = /(?!^)(?=(\d{3})+$)/g
/**
* 1.仔细分析一下我们想去除最前面的','
* 2.实际就是匹配最前面的位置不能为','就可以
* 3.那么(?!^)就是用来匹配最开始的位置不能是后面的这组规则
*/
console.log(str6.replace(regp2, ',')) //111,234,567,890
在来一个经典问题，通过正则获取
url后面的参数（⚠️必考题），这明显就是一个匹配位置的正则
let str7 = 'www.gxx365.com?name="令狐冲"&age=32&from="华山派"'
function getQuery(type, str){
let partten = new RegExp(`(\\?|&)${type}=([^&]*)(&|$)`)
return str.match(partten)[2]
}
console.log(getQuery('name', str7)) //"令狐冲"
console.log(getQuery('age', str7)) //32
console.log(getQuery('from', str7)) // "华山派"
1.我们用其中一个
name来分析一下这段正则/(\?|&)name=([^&]*)(&|$)/
2.第一步(\?|&)表示开头可以用?或者&
3.第二步([^&]*)表示可以是任意值但是排除&
4.第三步(&|$)标识需要&结尾或者不需要&结尾
结语
本篇幅比较简短但是准确说明了在正则中我们应该怎样去匹配位置来满足需求中的骚操作
千里之行始于足下
