正则基本语法（由浅到深）

ik i5

已于 2023-07-30 21:10:26 修改

阅读量1k

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2023-02-19 21:49:28 首次发布

本文链接：https://blog.csdn.net/weixin_46104934/article/details/129000934

版权

JS 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

1. 匹配数字

isNAN 只对数字有效

const hd='abc123bcd';
let nums=[...hd].filter(a=>!Number.isNaN(parseInt(a))).join('')

\d 转义字符匹配数字

console.log(hd.match(/\d/g).join(''));

2. 字面量创建正则表达式

test 检测是否包含

const hd="houdun.com"
console.log(/@/.test(hd));  //hd里面是否包含@ 返回false

eval 检测表达式

let a="u"
console.log(eval(`/${a}/`).test(hd));  // true

3. 使用对象创建正则

g 表示全局匹配
i 不区分大小写
\w 匹配字母或数字或下划线
RegExp 创建对象的正则方式

// 创建对象的方式找u
  const hd='www.baidu.com'
  let a='u'
  let reg=new RegExp(a,'g')
  console.log(reg.test(hd));

动态匹配字符串高亮显示(检索)

<div>www.baidu.con</div>
<script>
  const con = prompt('请输入要的动态匹配的字符串')
  const reg = new RegExp(con, 'g')
  const div = document.querySelector('div')
     div.innerHTML= div.innerHTML.replace(reg, search => {
                    console.log(search);
                  return `<span style="color:red">${search}</span>`
      })
<script>

4. 选择符的使用

| 表示选择符，两边嵌套的是表达式

	let hd="www.baidu.com"
    console.log(/a|aaab/.test(hd));   // true
    const tel='020-9999999'
		// \d{7,8} // 表示找到7-8位以上数字
	console.log(/(010|020)\-\d{7,8}/.test(tel));  // true

5. 原子组与原子表的使用

（） 表示原子表
[] 表示原子组
注意 []与()的区别在于[]里面的每一个字符都是可以匹配的，但是 () 里面的字符是做一个整体的，也可以用 | 分开当做表达式

let reg = /[123456]/;
let hd = "123123"
console.log(hd.match(reg)); // 1


let reg = /(1236|456)/;  // 当表达式进行匹配(前面的不符合规则)
let hd = "123456"
console.log(hd.match(reg));  // 456

6. 转义字符

\d 表示数字[0-9]
^h 限制边界符表示已h开头
+ 表示一个或者多个
\w 表示任何字母或下划线
. 点的两次含义

 // 1. 除换行外任何字符
// 2. 普通点（要进行转义“\.”）
const price=23.34  // 注意边界的限定
console.log(/\d+\.\d+/.test(price));

对象中使用转义

const prices=12.34
const reg=new RegExp("\\d+\\.\\d+")
console.log(reg.test(prices));

7. 字符边界约束（区间限定）

^ 限制开始边界
$ 限制结束边界

const hd="hd333abc3"
console.log(/\d/.test(hd));   // true
// 限制开始必须为数字
console.log(/^\d/.test(hd));  //false
// 限制开始与结束必须为数字
console.log(/\d$/.test(hd));   // true
// 1. 限定英文字母3-6位  // 至少3位(加结束边界符有上线)
const halist='abcccccccccc'
console.log(/^[a-z]{3,6}$/.test(halist));   //false

7.1 开始结束边界对数字，字母区间限制

正则表达式	取值范围
[0-9]	0~9
[1-9][0-9]	10~99
1[0-9]{2}	100~199
2[0-4][0-9]	200~249
25[0-5]	250~255
[1-9][0-9][0-9]{0,2}	10~9999
[1-5][0-9]{4}	10000~59999

const halist='11'
// 开始边界1-9结束边界0-9 取值范围为[1-99]
console.log(/^[1-9][0-9]{0,1}$/.test(halist));   //true
// 说明 ab{1,3},就表示a，后面紧跟的b出现最少1次最多3次
let t="1"
console.log(/^([1-9]|[1-9][0-9])$/.test(t));  // 与上述相等

let s="cde"
// 表示这一段是abc、bcd、cde三者之一均可，顺序也必须一致
console.log(/^(abc|bcd|cde)$/.test(s));  // true

8. 元字符

d 匹配数字
D 除了数字都匹配

const hd = '010-1999999'
console.log(/\d{3}-\d{6,9}/g.test(hd));  // true
const hdList = 'ABCD 20210'
console.log(/\D+/.test(hdList));  // true

^ 以什么什么开头 ^1表示以1开头等
在原子组里面使用表示除了以什么什么开头 /[^ -\d:,] 除了以 - \d : ,开头的都匹配

const p=`张三:010-999,
李四:020-666`
console.log(p.match(/[^-\d:,\s]+/g)); // ['张三', '李四']

\s 匹配空白（包括空白）
\S 除了空白

console.log(/\s/.test(' '));  // true
console.log(/\S/.test(' '));    // false(只要有一个不是空白就是true)

9. w与W元字符

\w 表示字母数字下划线
\W 表示除了字母数字下划线

const hd='abc123_-'
console.log(hd.match(/\w+/g)); // ['abc123_']
 // 1. 练习匹配邮箱
const email='162292168@qq.com'
console.log(email.match(/\w+\@+\w+\.+\w+/g));  // 匹配邮箱
// 2. 做限制匹配邮箱
const emails='&&&162292168@qq.com'
console.log(emails.match(/^\w+\@+\w+\.+\w+$/g));  // 做开头与结尾的限制

10. 点字符

.表示除了换行符任意字符

const hd = 'houduan.com'
console.log(hd.match(/.+/gi));  //['houduan.com']
// 匹配网址中 .的转义
const url='https://www.baidu.com'
console.log(url.match(/https?:\/\/\w+\.\w+.\w+/));
// 空格的两种匹配方式
const tel='010 - 1999999'
console.log(tel.match(/\d+ - \d{3,9}/));
// 或
console.log(tel.match(/\d+\s-\s\d{3,9}/));

11 匹配所有字符

[] 原子组里面放的数据是可选择的
[\s\S] [\d\D] 可以匹配所有字符

 const hd='ab'
 console.log(hd.match(/[ab,,,xxx]+/g));

12. g与i修正符

i 表示不区分大小写
g 全局匹配

 const hd='HuUadd'
 console.log(hd.match(/u/gi));  // ['u','U']
 // 大小写U替换成@
 console.log(hd.replace(/u/gi,'@')); // H@@add

13. m匹配修正符

\s 空白
* 表示0个或者多个
\d 数字
. 除了换行任意符
m 转成一行单独处理

let hd = `
 #1 js,200元 #
 #2 php,300元 #
 #9 houdunren.com #测试
 #3 node.js,180 #
`
console.log(hd.match(/\s*#\d+\s+.+\s+#\s+/g));
const data = (hd.match(/^\s*#\d+\s+.+\s+#$/gm)).map(v => {
	v = v.replace(/\s*#\d+\s*/, '').replace(/#/, '')
	let [name, price] = v.split(',')
	return { name, price }
})
console.log(data);
// [
// 	{ name: 'js', price: '200元 ' },
// 	{ name: 'php', price: '300元 ' },
// 	{ name: 'node.js', price: '180 ' }
// ]

14. 汉子与字符属性

[L] 有L属性就证明他是一个字母
[P] 只匹配标点符号
[sc=Han] // 匹配中文
u宽字节匹配，只匹配一半

注意 检测是不是字母必须结合u

const hd='houduanren2010,正则'
console.log(hd.match(/\p{L}/gu));  //['h', 'o', 'u', 'd','u', 'a', 'n', 'r','e', 'n', '正', '则']
console.log(hd.match(/\p{P}/gu));  // [',']
console.log(hd.match(/\p{sc=Han}/gu));  // [ '正', '则' ]
let str="SY"
console.log(str.match(/[SY]/u));    // S

15. lastIndex的使用

lastIndex 记录上一次搜索的下标
利用这个属性可以匹配把每个数据push到新的数组里面

let hd = "houdunren";
// console.log(hd.match(/\w/g));
let reg = /\w/g;
console.log(reg.lastIndex);  // 0
console.log(reg.exec(hd));  //["h"]
console.log(reg.lastIndex); // 1
console.log(reg.exec(hd));  //['0']
const data=[]
while ((res = reg.exec(hd))) {
	data.push(res[0])
	console.log(res);
}
console.log(data); // ["u","d"....]

16. 有效率的y模式

y模式与普通模式匹配的比较

const hd = 'udunren'
const reg = /u/g
console.log(reg.exec(hd[0]));   // ['u']
console.log(reg.lastIndex); // 1
console.log(reg.exec(hd[0]));
console.log(reg.lastIndex);  // 3
// y模式 如何匹配的不符合就返回null
console.log('xxxxxxxxxxxxxx测试');
const hy='udunren'
const regs=/u/y
console.log(regs.exec(hy));
console.log(regs.lastIndex);  // 1
console.log(regs.exec(hy));  
console.log(regs.lastIndex);  // 1

y模式下全文检索QQ号

let hdqq = `模式全文检索QQ号:123456789,2836879147,846212934全文检索`
let regs = /(\d+),?/y
regs.lastIndex = 10  // 去除数字前的字符
// console.log(regs.exec(hdqq));  // 检索123456789
// console.log(regs.exec(hdqq));
// console.log(regs.exec(hdqq));
let qq = []
while ((res = regs.exec(hdqq))) qq.push(res[0])
console.log(qq); // [ '123456789,', '2836879147,', '846212934' ]

17. 原子表

[/,.] 表示里面的字符存在或关系（都可以匹配）

let hd = 'qianduanrenu'
console.log(hd.match(/[ur]/g)); // [ 'u', 'r', 'u' ]
let tel ='2023-0-9'
// let reg=/\d{3}\-\d{1}\-\d{1}/
let reg=/^\d{4}([-\/])\d{1}[-\/]\d{1}$/
console.log(tel.match(reg));

18. 区间匹配

<input type="text" name="username">
	<script>
		//  [0-9] 区间匹配
		//  + 号的贪婪匹配1到多个
			let hd = "2010"
			console.log(hd.match(/[0-9]+/g));
			let input =document.querySelector(`[name="username"]`)
			input.addEventListener('keyup',function(){
				if (this.value.match(/\w+/)) {
					this.value=''
				}
				console.log(this.value.match(/\w+/));
			})
	</script>

19. 排除匹配

^ 在[]原子表中使用(表示除了)
- 必须使用转义

let hd='houdunren.com'
console.log(hd.match(/[ue]/gi)); // [ 'u', 'u', 'e' ]
// 在原子表中加^符号 ， 表示排除
console.log(hd.match(/[^ue]/gi)); // ['h', 'o', 'd', 'n','r', 'n', '.', 'c','o', 'm']
// 匹配中文
let en='张三:127.0.0.1,历史127'
console.log(en.match(/[^\d,\-:.]+/g));

20. 原子组字符不解析

()原子组，单个()放在外面就是原子组

let hd='(123456)+.'
let hds='(123456)+.'
console.log(hds.match(/()/gi));  // 原子组匹配空
console.log(hds.match(/[()]/gi)); // [ '(', ')' ]

21. 使用原子表匹配所有

s 后面跟s表示忽略换行符

let hd = `
      houdunren
      hdcms
    `;
console.log(hd.match(/.+/gs));
// [\s\S] 所有内容   [\d\D] 所有内容
console.log(hd.match(/[\s\S]+/)[0]);

22. 使用正则操作DOM

() 原子组
[] 原子表
\1 就是取前面的原子表
* 匹配0个或者多个

<!-- 1. 匹配h元素替换成空 -->
	<p>ceshi</p>
	<h2>123456</h2>
	<h2>123456</h2>
	<script>
	let body = document.body
	let reg=/<(h[1-6])>[\s\S]*<\/\1>/gi
	body.innerHTML=body.innerHTML.replace(reg,'')
	</script>

23. 邮箱验证原子组的使用

<input type="text" value="2300001025@hdcms.com.cn" name="name">
	<script>
      const tyName=document.querySelector("[name='name']").value
			// console.log(tyName);
			// const reg=/^\w+\@\w+\.\w+/g
			// console.log(tyName.match(reg));
			// 1. 改进  test-x@qq.com  ()// 原子表包含|表示或
			// const reg=/^[\w-]+@[\w-]+\.(com|cn|org|net|cc)$/g
			// console.log(tyName.match(reg));

			// 2.匹配 2300001025@hd.com.cn // 新浪正则
			// let tyName= ''
			const reg=/^[\w-]+@([\w-]+\.)+(com|cn|org|cc)$/i
			console.log(tyName.match(reg));
</script>

24. 原子组完成替换功能

<script>
		let hd = `
		<h1>houdunren</h1>
		<span>后盾人</span>
		<h2>hdcms</h2>
		`;
		// 1. 把h标签替换成P标签
		const reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi
		// 2. 注意这个$后面跟的数字表示第几个原子组里的数据
		// console.log(hd.replace(reg, `<p>$2<p>`));
			// 函数形式
			hd.replace(reg,(p0,p1,p2)=>{
				console.log(p0)  // 表示<h1>houdunren</h1>
				console.log(p1);  //h1
				console.log(p2);  // 内容 houdunren
				console.log(`<p>${p2}<p>`);
			})
	</script>

25. 嵌套分组与不记录分组

?: 在原子组里面使用，表示不记录

 let hd = `
    https://www.houdunren.com
    http://houdunwang.com
    https://hdcms.com
    `;
 let reg=/https?:\/\/\w+\.\w+\.(com|cn|org|cc)/gi
 console.log(hd.match(reg));

let reg=/https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|cc|org))/gi

 let hd = `
    https://www.houdunren.com
    http://houdunwang.com
    https://hdcms.com
    `;
let reg=/https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|cc|org))/gi
let urls=[]
while((res=reg.exec(hd))){
		urls.push(res[1])
}
console.log(urls);

26. 多种重复匹配与原子组

let hd="hdddddhd"
// 1. 在这里使用原子组 ， 表示里面的内容是一个整体
console.log(hd.match(/(hd)+/gi)); // [ 'hd', 'hd' ]
let tel ='0122-9999999'
console.log(tel.match(/^0\d{2,3}\-\d{2,6}/));

27. 网站用户名验证

<input type="text" name="username" />
	<script>
		document.querySelector(`[name="username"]`).addEventListener("keyup", e => {
			const value = e.target.value;
			let reg = /^[a-z][\w-]{2,7}$/i;   // 以字母开头，且字母数字下划线2位到7位结束
			console.log(reg.test(value));
		});
	</script>

28. 批量使用正则完成密码校验

使用数组的形式批量使用正则

<input type="text" name="password" value="" />
	<script>
		let input=document.querySelector("[name='password']")
		input.addEventListener("keyup",(e)=>{
			 const value = e.target.value;
			// 1. 使用数组的形式批量使用正则
    const regs = [/^[a-z0-9]{5,10}$/i, /[A-Z]/, /[0-9]/];
			let start=regs.every(e=>e.test(value))
			console.log(start ? '正确' : '错误');
		})
	</script>

29. 禁止贪婪

? 表示0或1个
{2,10}? 这里使用问号就是只能匹配两个

let hd="hdddd"
console.log(hd.match(/hd{2,10}?/g)); // ["hdd"]

30. 标签匹配禁止贪婪

<body>
	<main>
		<span>houdunwang</span>
		<span>hdcms.com</span>
		<span>houdunren.com</span>
	</main>
	<script>
		// 1.匹配span 换成h4标签并把内容描红
		const main = document.querySelector('main')
		// ? 禁止贪婪 表示先在第一个标签进行匹配
		const reg = /<span>([\s\S]+?)<\/span>/gi
		main.innerHTML = main.innerHTML.replace(reg, (p1, p2) => {
			return `<h4 style="color:red">${p2}</h4>`
		})
	</script>
</body>

31. 使用matchAll完成全局匹配

matchAll 匹配的是可迭代的对象
<\/\1> 提炼内容'\1'表示匹配(h[1-6])

<body>
	<!-- 1. 获取标签里面的数据 -->
	<h1>houdunren.com</h1>
	<h2>hdcms.com</h2>
	<h1>测试</h1>
</body>
<script>
	let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/gi
	const body=document.body
	console.dir(body.innerHTML.match(reg))  //"h1>houdunren.com</h1>\n\t<h2>hdcms.com</h2>\n\t<h1>后盾人</h1>"
  // 注意 matchAll 匹配的是可迭代的对象
	const hd=body.innerHTML.matchAll(reg)
	console.log(hd); // 可迭代对象
	let contents=[]
	for (const iterator of hd) {
		console.log(iterator);
		contents.push(iterator[2])
	}
	console.table(contents);
</script>

32. 为低版本游览器兼容matchAll方法

<body>
	<h1>houdunren.com</h1>
	<h2>hdcms.com</h2>
	<h1>测试</h1>
</body>
<script>
	String.prototype.matchAll = function (reg) {
		let res = this.match(reg);
		if (res) {
			let str = this.replace(res[0], "^".repeat(res[0].length));
			let match = str.matchAll(reg) || [];
			return [res, ...match];
		}
	};
	let body = document.querySelector("body").innerHTML;
	let search = body.matchAll(/<(h[1-6])>([\s\S]+?)<\/\1>/i);
	console.log(search);
</script>

33. 使用exec完成全局的匹配

<body>
	<h1>houdunren.com</h1>
	<h2>hdcms.com</h2>
	<h1>测试</h1>
</body>
<script>
	let reg = /<(h[1-6])>[\s\S]+?(\/\1)/gi
	const body = document.body.innerHTML
	// console.log(reg.exec(body));
	// console.log(reg.exec(body));
	let contents = []
	while ((res = reg.exec(body))) {
		contents.push(res)
	}
	console.log(contents);

	// 1.封装函数的方式进行匹配
	function search(string,reg) {
    let result = [];
		while ((res = reg.exec(string))) {
			result.push(res);
		}
		return result;
	}
 let content=search(document.body.innerHTML, /<(h[1-6])>[\s\S]+?(\/\1)/gi)
 console.dir(content);
</script>

34 . 字符串正则方法

search方法匹配字符成功时返回下标
match 返回匹配到所有字符的数组

let search='hd123hd'
console.log(search.search(/\h/gi));  // 0
let hd = `
    https://hdcms.com  
    http://www.sina.com.cn
    https://www.houdunren.com
`;
let reg = /https?:\/\/(\w+\.)?(\w+\.)+(com|cn|org|cc)/gi;
console.dir(hd.match(reg));

matchAll 返回可迭代数据

    let hd = `
    https://hdcms.com
    http://www.sina.com.cn
    https://www.houdunren.com
`;
    let reg = /https?:\/\/(?:\w+\.)?(?:\w+\.)+(?:com|cn|org|cc)/gi;
    for (const iterator of hd.matchAll(reg)) {
      console.log(iterator);
    }
let hdcms = "2020/09/12";
console.log(hdcms.split(/[-\/]/));

35. $符号在正则中的替换

// 1. $` 替换内容前面的字符
// 2. $' 替换内容后面的字符
// 3. $& 匹配自己本身的内容
const tel="2023/2/18"
// / 替换成-
console.log(tel.replace(/\//g,"-"));  // 2023-2-18
const tels="(010)999999 (202)999999999"
const reg=/\((\d{3,4})\)(\d{6,12})/g
// 1. $1 表示010 202 这个组
// 2. $2表示999...这个组 
console.log(tels.replace(reg, '$1-$2'));  // 010-999999 202-999999999
const con="=测试="
// 1. 在测试前后分别加上=
console.log(con.replace(/测试/,"$`"));  // === ,把测试替换成=
console.log(con.replace(/测试/,'$&'));  // =测试= ， 匹配自己本身
console.log(con.replace(/测试/,'$`$&$`'));

36. 原子组在项目中的使用

给http加上s ，没有www加上www 只匹配hdcms与houdun人

<main>
		<a style="color:red" href="http://www.hdcms.com">
			开源系统
		</a>
		<a id="l1" href="http://houdunren.com">后盾人</a>
		<a href="http://yahoo.com">雅虎</a>
		<h4>http://www.hdcms.com</h4>
	</main>
	<script>
		// 1. 给http加上s ， 没有www加上www 只匹配hdcms与houdun人
		const mainList = document.querySelector("body main")
		const reg = /(<a.*href=['"])(http?)(:\/\/)(www\.)?(hdcms|houdunren)/gi
		mainList.innerHTML = mainList.innerHTML.replace(reg, (p1, ...p2) => {
			p2[1] += 's';  // 可以判断是否有s
			p2[3] = p2[3] || "www."
			return p2.splice(0, 5).join('')
		})
	</script>

37. 原子组取别名

?<con> 取别名

<script>
		let hd = `
  <h1>houdunren</h1>
  <span>测试</span>
  <h2>hdcms</h2>
`;
		// 1. 取别名的方式拿取值 
		// 2. ?<con>取别名 
		const reg = /<(h[1-6])>(?<con>.*)<\/\1>/gi  
		console.log(hd.replace(reg, `<h4>$<con></h4>`));
	</script>

使用原子组别名优化正则

	<main>
		<a id="hd" href="https://www.houdunren.com">后盾人</a>
		<a href="https://www.hdcms.com">hdcms</a>
		<a href="https://www.sina.com.cn">新浪</a>
	</main>
	<!-- 说明: 把连接提取成link:连接 ， title:内容 -->
	<script>
		const main = document.querySelector('body main')
		const reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/gi
		console.log(main.innerHTML.match(reg));   // "<a id=\"hd\" href=\"https://www.houdunren.com\">后盾人</a>""\"""https://www.houdunren.com""后盾人"
		// groups:{ link: 'https://www.houdunren.com', title: '后盾人' }
		const Lists = []
		for (const iterator of main.innerHTML.matchAll(reg)) {
			Lists.push(iterator["groups"]);
		}
		console.log(Lists);
	</script>

38. 正则与字符串的方法

字符串的方法 match matchAll search replace
正则的方法 test 与exec

<input type="text" name="email" />
	<script>
		const mail = document.querySelector(`[name="email"]`);
		mail.addEventListener("keyup", e => {
			let value = e.target.value;
			let flag = /^[\w-]+@(\w+\.)+(com|org|cn)$/i.test(value);
			console.log(flag);
		});
	</script>

const datalist ="前端开发1不断分享视频教程，前端开1发网址是 houdunren.com前端开发1前端开发1"
//exec match
let reg = /前端开发1/g;
let count = 0;
while ((res = reg.exec(datalist))) {
	count++;
}
console.log(reg.lastIndex);
console.log(reg.exec(datalist));   // 
console.log(reg.lastIndex);
console.log(reg.lastIndex);
console.log(count+1);

39. `?=`断言匹配

?= 条件语句

给后面是百度的，公司两个字加超链接

<main>在公司从事前端开发已经三年了，现在的公司是百度</main>
  <script>
		const mian=document.querySelector('main')
		let reg=/公司(?=是百度)/g   // 后面是谁的
		 mian.innerHTML=mian.innerHTML.replace(reg, `<a href="">$&</a>`)
	</script>

使用断言规范价格

需求给元前面的数字加上.00

		let lessons = `
      js,200元,300次
      php,300.00元,100次
      node.js,180元,260次
    `;
		const reg = /(\d+)(.00)?(?=元)/gi
        lessons=lessons.replace(reg, (p1, ...arg) => {
			arg[1] = arg[1] || '.00'
		 return arg.splice(0,2).join('')
		})
		console.log(lessons);

40 . `?<=` 断言匹配

?<= 条件语句（表示取前面的断言）

把连接全部替换成https://baidu.com

<main>
		<a href="https://baidu.com">百度</a>
		<a href="https://yahoo.com">雅虎</a>
	</main>
	<script>
		// 1. ?<=  条件语句 （表示取前面的断言）
		let hd = 'www.baidu.com'
		const reg = /(?<=www.)\w+/gi
		console.log(hd.match(reg));  // ['baidu']
		// 2. . 点字符表示除了换行符的任意字符
		const mian=document.querySelector('main')
		const regs=/(?<=href=(["'])).+(?=\1)/gi
		mian.innerHTML=mian.innerHTML.replace(regs,`https:baidu.com`)
	</script>

使用断言模糊电话号码

let users = `
  向军电话: 12345678901
  后盾人电话: 98745675603
`;
let reg = /(?<=\d{7})\d+/gi
users = users.replace(reg, v => {
	return "*".repeat(4)
})
console.log(users);

41. `?!` 断言匹配

?! 条件语句表示后面不是谁的

匹配后面不是数字的英文

const name='abcd123abcdefgh'
const reg=/[a-zA-Z](?!\d+)/gi  //后面不是数字
console.log(name.match(reg));   // ['a', 'b', 'c', 'a','b', 'c', 'd', 'e','f', 'g', 'h']

42. 限制用户名

<body>
	<input type="text" name="username">
	<script>
		// 1. 限制用户名不能为张三
		const username=document.querySelector(`[name="username"]`)
		username.addEventListener('keyup',function(){
			const reg=/^(?!.*张三.*)[a-z]{1,5}$/gi
			console.log(this.value.match(reg));
		})
	</script>
</body>

43. `?<!` 断言匹配

const name = 'abcd123abcdefgh'
const reg = /[a-zA-Z]+(?<!\d+)/gi  //前面不是数字
console.log(name.match(reg));   //
let hd = "hdcms99houdunren";
let regs = /(?<!\d+)[a-z]+/gi;
console.log(hd.match(regs));

44. 使用断言排除法统一数据

把不是oss全部替换成oss

	<main>
		<a href="https://www.houdunren.com/1.jpg">1.jpg</a>
		<a href="https://oss.houdunren.com/2.jpg">2.jpg</a>
		<a href="https://cdn.houdunren.com/3.jpg">3.jpg</a>
		<a href="https://houdunren.com/4.jpg">后盾人</a>
	</main>
	<script>
		const main=document.querySelector("main")
		const reg=/https?:\/\/([a-z]+)?(?<!=oss)\..+?(?=\/)/gi
	  main.innerHTML=main.innerHTML.replace(reg,v=>{
			  return "https://oss.houdunren.com";
		})
	</script>

总结1.0 `() [] {}`不同的意思

() 是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。
(\s*)表示连续空格的字符串。
[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字。[\s*]表示空格或者*号。
{}一般用来表示匹配的长度，比如 \s{3} 表示匹配三个空格，\s{1,3}表示匹配一到三个空格。
(0-9) 匹配 '0-9′ 本身。 [0-9]* 匹配数字（注意后面有 *，可以为空）[0-9]+ 匹配数字（注意后面有
+，不可以为空）{1-9} 写法错误。
[0-9]{0,9} 表示长度为 0 到 9 的数字字符串。

圆括号()是组，主要应用在限制多选结构的范围/分组/捕获文本/环视/特殊模式处理
示例：

(abc|bcd|cde)，表示这一段是abc、bcd、cde三者之一均可，顺序也必须一致
(abc)?，表示这一组要么一起出现，要么不出现，出现则按此组内的顺序出现
(?:abc)表示找到这样abc这样一组，但不记录，不保存到 $变量中，否则可以通过$ x取第几个括号所匹配到的项，比如：(aaa)(bbb)(ccc)(?:ddd)(eee)，可以用$1获取(aaa)匹配到的内容，而$3则获取到了(ccc)匹配到的内容，而$4则获取的是由(eee)匹配到的内容，因为前一对括号没有保存变量
a(?=bbb) 顺序环视表示a后面必须紧跟3个连续的b
(?i:xxxx) 不区分大小写 (?s:.*) 跨行匹配.可以匹配回车符

方括号是单个匹配，字符集/排除字符集/命名字符集
示例：

[0-3]，表示找到这一个位置上的字符只能是0到3这四个数字，与(abc|bcd|cde)的作用比较类似，但圆括号可以匹配多个连续的字符，而一对方括号只能匹配单个字符
[^0-3]，表示找到这一个位置上的字符只能是除了0到3之外的所有字符
[:digit:] 0-9 [:alnum:] A-Za-z0-9

()和[]有本质的区别

()内的内容表示的是一个子表达式，()本身不匹配任何东西，也不限制匹配任何东西，只是把括号内的内容作为同一个表达式来处理，例如(ab){1,3}，就表示ab一起连续出现最少1次，最多3次。如果没有括号的话，ab{1,3},就表示a，后面紧跟的b出现最少1次，最多3次。另外，括号在匹配模式中也很重要。
[]表示匹配的字符在[]中，并且只能出现一次，并且特殊字符写在[]会被当成普通字符来匹配。例如[(a)]，会匹配(、a、)、这三个字符。