Gramática regular básica (de superficial a profunda)

Language 2023-09-18 23:50:50 views: null

1. Coincidencia de números

  • isNANSólo válido para números
const hd='abc123bcd';
let nums=[...hd].filter(a=>!Number.isNaN(parseInt(a))).join('')
  • \dCaracteres de escape para hacer coincidir números
console.log(hd.match(/\d/g).join(''));

2. Creación literal de expresiones regulares.

  • testCompruebe si contiene
const hd="houdun.com"
console.log(/@/.test(hd));  //hd里面是否包含@ 返回false
  • evalexpresión de prueba
let a="u"
console.log(eval(`/${
      
      a}/`).test(hd));  // true

3. Utilice objetos para crear reglas regulares.

  • g Indica una coincidencia global
  • i no entre mayúsculas y minúsculas
  • \wEmparejar letras o números o guiones bajos
  • RegExpForma habitual de crear objetos.
// 创建对象的方式找u
  const hd='www.baidu.com'
  let a='u'
  let reg=new RegExp(a,'g')
  console.log(reg.test(hd));
  1. Resaltado dinámico de cadenas coincidentes (recuperación)
<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. Uso de selectores

  • | Representa el selector, anidados en ambos lados están las expresiones.
	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. Uso de grupos atómicos y tablas atómicas.

  • （）Representa la tabla de átomos.
  • []La diferencia entre indicar el grupo atómico
    注意 []y es que cada carácter que contiene puede coincidir, pero los caracteres en se usan como un todo y también se pueden separar por | como expresiones()[]()
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. Personajes de escape

  • \drepresenta un número [0-9]
  • ^hEl carácter de límite de restricción indica que comienza con h
  • + representa uno o más
  • \wRepresenta cualquier letra o guión bajo.
  • .Dos significados del punto
 // 1. 除换行外任何字符
// 2. 普通点（要进行转义“\.”）
const price=23.34  // 注意边界的限定
console.log(/\d+\.\d+/.test(price));

Usar escapes en objetos

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

7. Restricciones de límites de caracteres (limitación de intervalo)

  • ^límite de inicio límite
  • $límite final límite
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 Límites iniciales y finales para números e intervalos de letras

expresión regular Rangos
[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. Metacaracteres

  • dNúmeros coincidentes
  • DCoincide con todo excepto los números.
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
  • ^Empezar con algo ^1significa empezar con 1, etc.
  • Usado en un grupo atómico para indicar algo distinto de comenzar con algo./[^ -\d:,] 除了以 - \d : ,开头的都匹配 
const p=`张三:010-999,
李四:020-666`
console.log(p.match(/[^-\d:,\s]+/g)); // ['张三', '李四']
  • \sCoincide con espacios en blanco (incluidos los espacios en blanco)
  • \Sexcepto en blanco
console.log(/\s/.test(' '));  // true
console.log(/\S/.test(' '));    // false(只要有一个不是空白就是true)

9. metacaracteres w y W

  • \wRepresenta un subrayado alfanumérico.
  • \WIndica excepto alfanumérico y guión bajo
const hd='abc123_-'
console.log(hd.match(/\w+/g)); // ['abc123_']
 // 1. 练习匹配邮箱
const email='[email protected]'
console.log(email.match(/\w+\@+\w+\.+\w+/g));  // 匹配邮箱
// 2. 做限制匹配邮箱
const emails='&&&[email protected]'
console.log(emails.match(/^\w+\@+\w+\.+\w+$/g));  // 做开头与结尾的限制

10. Carácter de punto

  • .Representa cualquier carácter excepto los saltos de línea.
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 coincide con todos los personajes

  • []Los datos colocados en el grupo atómico son opcionales.
  • [\s\S] [\d\D]Puede coincidir con todos los personajes
 const hd='ab'
 console.log(hd.match(/[ab,,,xxx]+/g));

12. modificadores g e i

  • iIndica que no se distinguen entre mayúsculas y minúsculas
  • gpartido global
 const hd='HuUadd'
 console.log(hd.match(/u/gi));  // ['u','U']
 // 大小写U替换成@
 console.log(hd.replace(/u/gi,'@')); // H@@add

13. m modificador de coincidencia

  • \sblanco
  • *Indica 0 o más
  • \dnúmero
  • .Cualquier carácter excepto nueva línea
  • mConvertir a una línea y procesar por separado
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. Hanzi y los atributos de los personajes.

  • [L]El atributo L demuestra que es una letra.
  • [P]Coincidir sólo con caracteres de puntuación
  • [sc=Han]// Emparejar chino
  • uCoincidencia de bytes amplios, solo la mitad de la coincidencia
  1. 注意Compruebe si las letras deben combinarse con 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. Uso de último índice

  • lastIndexRegistre el subíndice de la última búsqueda.
  • Este atributo se puede utilizar para hacer coincidir e insertar cada dato en una nueva matriz.
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. Modo y eficiente

  1. yComparación de coincidencia de patrones y patrones normales
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
  1. yNúmero QQ de búsqueda de texto completo en modo
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. tabla atómica

  • [/,.]Indica la existencia o relación de los personajes internos (todos pueden coincidir)
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. Coincidencia de intervalos

<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. Excluir coincidencias

  • ^Usado en []la tabla de átomos (es decir, excepto)
  • -Debe usar escape
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. Los caracteres del grupo atómico no se analizan.

  • ()Grupo atómico, uno solo ()colocado afuera es un grupo atómico
let hd='(123456)+.'
let hds='(123456)+.'
console.log(hds.match(/()/gi));  // 原子组匹配空
console.log(hds.match(/[()]/gi)); // [ '(', ')' ]

21. Utilice la tabla atómica para unir todos

  • sSeguido de s para ignorar las nuevas líneas
let hd = `
      houdunren
      hdcms
    `;
console.log(hd.match(/.+/gs));
// [\s\S] 所有内容   [\d\D] 所有内容
console.log(hd.match(/[\s\S]+/)[0]);

22. Utilice expresiones regulares para manipular DOM

  • ()grupo atómico
  • []tabla atómica
  • \1Solo toma la tabla atómica anterior.
  • *Coincide con 0 o más
<!-- 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. Uso de grupos atómicos de verificación de correo electrónico.

<input type="text" value="[email protected]" 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. 改进  [email protected]  ()// 原子表包含|表示或
			// const reg=/^[\w-]+@[\w-]+\.(com|cn|org|net|cc)$/g
			// console.log(tyName.match(reg));

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

24. Los grupos atómicos completan la función de reemplazo.

<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. Agrupación anidada y agrupación no registrada

  • ?:Se utiliza en un grupo atómico para indicar que no hay registro.
 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. Múltiples coincidencias repetidas y grupos atómicos.

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. Verificación del nombre de usuario del sitio web

<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. Utilice expresiones regulares para completar la verificación de contraseña en lotes

  1. Utilice expresiones regulares en lotes en forma de matrices.
<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. Sin avaricia

  • ?Indica 0 o 1
  • {2,10}?El signo de interrogación utilizado aquí significa que sólo se pueden hacer coincidir dos.
let hd="hdddd"
console.log(hd.match(/hd{2,10}?/g)); // ["hdd"]

30. La coincidencia de etiquetas prohíbe la codicia

<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. Utilice matchAll para completar la coincidencia global

  • matchAllCoincide con un objeto iterable
  • <\/\1>Extraer '\1'coincidencia de representación de contenido(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. Compatible con el método matchAll para navegadores de versiones inferiores

<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. Utilice exec para completar la coincidencia global

<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. Método regular de cadena

  • search方法Devuelve el subíndice cuando el carácter coincide correctamente.
  • matchDevuelve una matriz de todos los caracteres coincidentes.
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));
  • matchAllDevolver datos iterables
    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. Reemplazo del símbolo $ en expresiones regulares

// 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. Uso de grupos atómicos en proyectos.

  1. Agregue s a http, agregue www sin www para que coincida solo con hdcms y personas 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. Alias ​​de grupos atómicos

  • ?<con>Toma un alias
<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>

Utilice alias de grupos atómicos para optimizar expresiones regulares

	<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. Métodos regulares y de cadena.

  • Métodos de cadenamatch matchAll search replace
  • método regular testconexec
<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. ?=Afirmar coincidencia

  • ?=Declaraciones condicionales
  • 公司Agregue un hipervínculo a las dos palabras seguidas de Baidu.
<main>在公司从事前端开发已经三年了，现在的公司是百度</main>
  <script>
		const mian=document.querySelector('main')
		let reg=/公司(?=是百度)/g   // 后面是谁的
		 mian.innerHTML=mian.innerHTML.replace(reg, `<a href="">$&</a>`)
	</script>

Utilice afirmaciones para estandarizar precios

  1. Es necesario sumar .00 al número delante del yuan.
		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. ?<=Afirmar coincidencia

  • ?<= Declaración condicional (que indica tomar la afirmación anterior)
  1. Reemplace todos los enlaces con 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>

Ofuscar números de teléfono mediante afirmaciones

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

41. ?!Afirmar coincidencia

  • ?!La declaración condicional indica que lo siguiente no pertenece a nadie.
  1. Une palabras en inglés que no van seguidas de números
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. Restringir nombres de usuario

<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. ?<!Afirmar coincidencia

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. Utilice la eliminación de aserciones para unificar datos.

  1. Reemplazar no osstodos conoss
	<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>

Resume () [] {}los diferentes significados de 1.0

  • () es extraer la cadena coincidente. Hay tantas cadenas coincidentes correspondientes como () en la expresión.
  • (\s*) representa una cadena de espacios consecutivos.
  • [] es el rango de caracteres que define la coincidencia. Por ejemplo, [a-zA-Z0-9] significa que los caracteres en las posiciones correspondientes deben coincidir con los caracteres y números en inglés. [\s*] representa un espacio o signo *.
  • {} se usa generalmente para indicar la duración de la coincidencia, por ejemplo, \s{3} indica que coinciden tres espacios y \s{1,3} indica que coinciden de uno a tres espacios.
  • (0-9) coincide con el propio '0-9'. [0-9]* coincide con números (tenga en cuenta que hay un * después, puede estar vacío) [0-9]+ coincide con números (tenga en cuenta que hay
    + después, no puede estar vacío) {1-9} es escrito incorrectamente.
  • [0-9]{0,9} representa una cadena numérica con una longitud de 0 a 9.

Los paréntesis () son grupos, que se utilizan principalmente para limitar el rango de estructuras de selección múltiple/agrupación/captura de texto/mirar alrededor/
ejemplos de procesamiento de modo especial:

  1. (abc|bcd|cde) significa que este párrafo puede ser cualquiera de abc, bcd y cde, y el orden debe ser coherente.
  2. (abc)?, significa que este grupo aparece junto o no aparece, si aparece, aparecerá en el orden dentro de este grupo.
  3. (?: Abc) significa que se encuentra un grupo como abc, pero no se registra ni se guarda en una variable; de ​​lo contrario, se puede pasar a través de la variable; de ​​lo contrario, se puede pasarvariable; de ​​lo contrario, puede usar $3 obtiene el contenido que coincide con (ccc), mientras que $4 obtiene el contenido que coincide con (eee), porque el primer par de corchetes no guarda la variable.
  4. a(?=bbb) Una mirada secuencial significa que a debe ir seguida de 3 b consecutivas
  5. (?i:xxxx) No distingue entre mayúsculas y minúsculas (?s:.*) Coincidencia entre líneas. Puede coincidir con caracteres de retorno de carro

Los corchetes son un
ejemplo de coincidencia única, juego de caracteres/juego de caracteres excluidos/juego de caracteres con nombre:

  1. [0-3] significa que los caracteres encontrados en esta posición solo pueden ser cuatro números del 0 al 3. Es similar a (abc|bcd|cde), pero los paréntesis pueden coincidir con varios caracteres consecutivos y un par de corchetes sólo puede coincidir con un solo carácter
  2. [^0-3] significa que los caracteres encontrados en esta posición solo pueden ser todos los caracteres excepto del 0 al 3.
  3. [:dígito:] 0-9 [:alnum:] A-Za-z0-9

Hay una diferencia esencial entre () y []

  1. El contenido dentro de () representa una subexpresión. () en sí no coincide con nada, ni está restringido a coincidir con nada. Simplemente trata el contenido entre paréntesis como la misma expresión, como (ab){1,3 }, lo que significa ese ab aparece juntos al menos una vez y como máximo 3 veces. Si no hay corchetes, ab{1,3} significa a, seguido de b que aparece al menos una vez y como máximo 3 veces. Además, los paréntesis son importantes para hacer coincidir patrones.
  2. [] significa que los caracteres coincidentes están en [] y solo pueden aparecer una vez, y los caracteres especiales escritos en [] coincidirán como caracteres normales. Por ejemplo, [(a)] coincidirá con los tres caracteres (, a,).

Supongo que te gusta

Origin blog.csdn.net/weixin_46104934/article/details/129000934
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com