js-彻底搞懂正则[^]

YogaMiller

已于 2023-08-23 00:37:33 修改

阅读量342

点赞数

分类专栏： javascript 文章标签： javascript

于 2023-07-19 22:59:51 首次发布

本文链接：https://blog.csdn.net/yogamiller/article/details/131217560

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

原子表[] 原子组() 元字符\s(空格) \w(字母数字下划线) .\d(数字) 模式修正符(i 忽略大小写 g全局 m/s 单行还是多行 )
match replace search(返回 index没有返回 -1) 都是字符串的方法 test 和 exec是正则的
. 的话不能匹配换行符, 加上s 修饰符视为单行可以
/[A-z]/ 这样好像 /[A-Za-z]/相等
利用match/exec 匹配的数组 …args splice const a = b || ‘’ b不存在的话, 则置为空.
$& 表示自身, $` $& $’ 左中右 $1 \1分别用来干啥
? 表示 0或1 也可以放在 + *{3} 后面用来禁止贪婪,
?: 不记录组
?<= ?=(断言只做条件, 不是组…)
split(/[]/) 写正则
. 点是不能匹配换行符的的话放原子表是不解析的 [.] 统一加转义吧!!!

巧妙的匹配所有字符

[^] 所有字符, 空集求反

汉字和字符属性

u 的话,能正确识别宽字节

[.] 原子表字符不解析
/[.]+/.test('aa') // false
'abc发财cc'.match(/\p{sc=Han}+/gu) //汉字（不包含标点）

let hd = 'fadfadf.发的发的沙发,爱的方法'
console.log(hd.match(/\p{L}/gu)) 字符
console.log(hd.match(/\p{P}/gu)) 标点符号

y 需要连续满足

let str = 'xxx:111,222,333,一堆没用的'
let reg = /\d+,?/y
reg.lastIndex = str.match(/\d/).index
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))

多行匹配 m 单行 s

let hd = `
         #1 js,200元 #
         #2 php,300元 # zml
         #3 node,400元 #
       `
const res = hd.match(/\s*#\d+\s+.+\s*#$/gm).map((v) => {
	v = v.replace(/\s*#\d+\s*/, '').replace('#', '')
	const [name, price] = v.split(',')  这里加不加 cons都可以,, 为啥??
	return { name, price }
})
console.log(JSON.stringify(res, null, 2))
得到 [{name: 'js', price: '200元'}, {name: 'node', price:'400元' }]

正则 test方法返回 boolean | 是选择符

/^(010|020)-\d{7,8}$/.test(tel) 
/^111|222$/.test('2223') false    相当于分成了这两种  ^111 222$ 想实现 111 || 222就像上面这样用括号.

正则方法 exec 一次一次的

通常搭配 g
lastIndex 正则属性, 上一次搜索的位置.

<body>
	<h1>zhangmingle</h1>
	<h2>zml</h2>
	<h1>怎么了</h1>
</body>
<script>
取出标签里面的内容.
let html = document.body.innerHTML
		// let res = str.replace(, '$2')
		let arr = []
		let reg = /<(h[1-6])>([^]*)<\/\1>/gi
		while ((r = reg.exec(html))) {
			arr.push(r[2])
		}
		console.log(arr)
</script>

转义 \d .

不干净了…hh

- 在 [ ]里面需要转义, 在外面就不需要
在 new 里面 \也需要转义, 意思是一个 \ 需要\

console.log('\d' === 'd')
new RegExp('\\d') 晕的话就直接打印一下.

边界处理和 { }数值

/^b{,1}$/.test('')  是非法的感觉
/^b{2,}$/.test('bb')  >= 2
但 ^ 放 [^]表示 除了里面的
换行 空格 都算空白 \s \n 换行符
元字符就是一个字符

\w 英文字母(大小写都可)数字(0-9) _

. 元字符 s 视为单行

`
  zml
`.match(/^.+$/)  null 
`
  zml
`.match(/^.+$/s) 视为单行了. ['\n  zml\n', index: 0, input: '\n  zml\n', groups: undefined]
/ / === /\s/ 空格  空格

? 表示 0 或 1

/a?b/.test('ab')  true
/(abc)?/.test('1fadsfadfadsfadsfadsfadsf')  true 空的是任何都是 true
/1(abc)?2/.test('1abc2') abc  做一个整体
/^(abc){1,2}$/.test('abc') 同样的 只有 abc abcabc满足

原子组和原子组别名 (?)

()扩起来的就是原子组
搭配 +
如果出现嵌套的情况, 直接数左括号,是第几个…$1,$2
\1表示复用用前面第一个原子组 /(abc)\1/

'---abc123---'.replace(/([a-z]+)(\d+)/, ($0, $1, $2) => {
	console.log($0, $1, $2)   abc123 abc 123
})

禁止贪婪

let str = `
  	<h1>zhangmingle</h1>
    <h2>zml</h2>
`
let res = str.match(/<(h[1-6])>([^]*)(?:<\/\1>)/i)  ?: 不记录组... 和 组搭配使用
很奇怪, 为啥这里没有贪婪,是因为只有一个 </h1>

1. 把 div 换成 span 标签
2. 不加禁止贪婪的话, 直接到最后了, 禁止贪婪的意思是, 满足正则条件的, 最短的.
let str = `
  <div>123</div>
  <div>456</div>
`
let res = str.replace(/<div>([^]*?)<\/div>/gi, '<span>$1</span>')

在这里插入图片描述


let hd = `
  https://www.houdunren.com
  http://houdunwang.org
  http://baidu.cn
`
let reg = /https?:\/\/(?:w+\.)?\w+\.(?:com|org|cn)/ig
console.log(hd.match(reg))
console.log(reg.exec(hd))
console.log(reg.exec(hd))

 ['https://www.houdunren.com', 'http://houdunwang.org', 'http://baidu.cn']
 ['https://www.houdunren.com', index: 3, input: '\n  https://www.houdunren.com\n  http://houdunwang.org\n  http://baidu.cn\n', groups: undefined]
 ['http://houdunwang.org', index: 31, input: '\n  https://www.houdunren.com\n  http://houdunwang.org\n  http://baidu.cn\n', groups: undefined]

批量使用正则完成密码验证

[/^[a-z0-9]{5,10}$/i, /[A-Z]/, /[0-9]/].every(i => i.test(val))
\w 字母数字下划线.


let reg = /.*/gs
let str = `
    <div>123</div>
    <div>456</div>
`
let res = str.match(reg)
console.log(res)  结果: ['\n    <div>123</div>\n    <div>456</div>\n', '']

matchAll 返回可迭代对象 for of 遍历

利用 match 手写 matchAll方法(利用递归)

let hd = `
<span>zml</span>
  <span>19</span>
  `
const reg = /<span>([^]+?)<\/span>/g
const li = hd.matchAll(reg)
console.log(li)

for (let i of li) {
	console.log(i)
}