Grammaire régulière de base (de superficielle à profonde)

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

1. Faites correspondre les numéros

  • isNANValable uniquement pour les numéros
const hd='abc123bcd';
let nums=[...hd].filter(a=>!Number.isNaN(parseInt(a))).join('')
  • \dCaractères d'échappement pour faire correspondre les nombres
console.log(hd.match(/\d/g).join(''));

2. Création littérale d'expressions régulières

  • testVérifiez s'il contient
const hd="houdun.com"
console.log(/@/.test(hd));  //hd里面是否包含@ 返回false
  • evalExpression de test
let a="u"
console.log(eval(`/${
      
      a}/`).test(hd));  // true

3. Utilisez des objets pour créer des règles régulières

  • g Indique une correspondance globale
  • i Pas sensible à la casse
  • \wFaites correspondre des lettres, des chiffres ou des traits de soulignement
  • RegExpManière régulière de créer des objets
// 创建对象的方式找u
  const hd='www.baidu.com'
  let a='u'
  let reg=new RegExp(a,'g')
  console.log(reg.test(hd));
  1. Mise en évidence dynamique des chaînes de correspondance (récupération)
<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. Utilisation des sélecteurs

  • | Représente le sélecteur, les expressions sont imbriquées des deux côtés
	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. Utilisation de groupes atomiques et de tables atomiques

  • （）Représente la table des atomes
  • []La différence entre représenter le groupe atomique
    注意 []et est que chaque caractère qu'il contient peut être mis en correspondance, mais les caractères sont utilisés dans leur ensemble et peuvent également être séparés par | comme expressions()[]()
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. Caractères d'échappement

  • \dreprésente un nombre [0-9]
  • ^hLe caractère de limite de restriction indique qu'il commence par h
  • + représente un ou plusieurs
  • \wReprésente n'importe quelle lettre ou trait de soulignement
  • .Deux significations du point
 // 1. 除换行外任何字符
// 2. 普通点（要进行转义“\.”）
const price=23.34  // 注意边界的限定
console.log(/\d+\.\d+/.test(price));

Utiliser des évasions dans des objets

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

7. Contraintes de limites de caractères (limitation d'intervalle)

  • ^limite début limite
  • $limite fin frontière
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 Limites de début et de fin des intervalles de chiffres et de lettres

expression régulière Gammes
[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. Métacaractères

  • dFaire correspondre les numéros
  • DCorrespond à tout sauf les chiffres
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
  • ^Commencer par quelque chose ^1signifie commencer par 1, etc.
  • Utilisé dans un groupe atomique pour indiquer autre chose que commencer par quelque chose/[^ -\d:,] 除了以 - \d : ,开头的都匹配 
const p=`张三:010-999,
李四:020-666`
console.log(p.match(/[^-\d:,\s]+/g)); // ['张三', '李四']
  • \sCorrespond aux espaces (y compris les espaces)
  • \Ssauf vide
console.log(/\s/.test(' '));  // true
console.log(/\S/.test(' '));    // false(只要有一个不是空白就是true)

9. Métacaractères w et W

  • \wReprésente un soulignement alphanumérique
  • \WIndique sauf les caractères alphanumériques et les traits de soulignement
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. Caractère de point

  • .Représente n'importe quel caractère à l'exception des sauts de ligne
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 correspond à tous les caractères

  • []Les données placées dans le groupe atomique sont facultatives
  • [\s\S] [\d\D]Peut correspondre à tous les caractères
 const hd='ab'
 console.log(hd.match(/[ab,,,xxx]+/g));

12. modificateurs g et i

  • iIndique l'insensibilité à la casse
  • gmatch mondial
 const hd='HuUadd'
 console.log(hd.match(/u/gi));  // ['u','U']
 // 大小写U替换成@
 console.log(hd.replace(/u/gi,'@')); // H@@add

13. m modificateur de correspondance

  • \svide
  • *Indique 0 ou plus
  • \dnombre
  • .N'importe quel caractère sauf la nouvelle ligne
  • mConvertir en une seule ligne et traiter séparément
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 et les attributs du personnage

  • [L]L'attribut L prouve qu'il s'agit d'une lettre
  • [P]Faire correspondre uniquement les caractères de ponctuation
  • [sc=Han]// Correspond au chinois
  • uCorrespondance d'octets large, seulement la moitié de la correspondance
  1. 注意Vérifiez si les lettres doivent être combinées avec 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. Utilisation de lastIndex

  • lastIndexEnregistrez l'indice de la dernière recherche
  • Cet attribut peut être utilisé pour faire correspondre et pousser chaque donnée dans un nouveau tableau.
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. Mode y efficace

  1. yComparaison de la correspondance de modèles et de modèles normaux
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. yRecherche en texte intégral Numéro QQ en mode
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. Tableau atomique

  • [/,.]Indique l'existence ou la relation des personnages à l'intérieur (tous peuvent être associés)
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. Correspondance d'intervalle

<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. Exclure les correspondances

  • ^Utilisé dans []la table des atomes (c'est-à-dire sauf)
  • -Doit utiliser l'évasion
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. Les caractères du groupe atomique ne sont pas analysés

  • ()Groupe atomique, un seul ()placé à l'extérieur est un groupe atomique
let hd='(123456)+.'
let hds='(123456)+.'
console.log(hds.match(/()/gi));  // 原子组匹配空
console.log(hds.match(/[()]/gi)); // [ '(', ')' ]

21. Utilisez une table atomique pour tout faire correspondre

  • sSuivi de s pour ignorer les nouvelles lignes
let hd = `
      houdunren
      hdcms
    `;
console.log(hd.match(/.+/gs));
// [\s\S] 所有内容   [\d\D] 所有内容
console.log(hd.match(/[\s\S]+/)[0]);

22. Utilisez des expressions régulières pour manipuler le DOM

  • ()Groupe atomique
  • []Tableau atomique
  • \1Prenez simplement la table atomique précédente
  • *Correspond à 0 ou plus
<!-- 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. Utilisation de groupes atomiques de vérification des e-mails

<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. Les groupes atomiques complètent la fonction de remplacement

<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. Regroupement imbriqué et regroupement non enregistré

  • ?:Utilisé dans un groupe atomique pour indiquer aucun enregistrement
 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. Plusieurs correspondances répétées et groupes atomiques

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. Vérification du nom d'utilisateur du site 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. Utilisez des expressions régulières pour effectuer la vérification du mot de passe par lots

  1. Utiliser des expressions régulières par lots sous forme de tableaux
<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. Pas de cupidité

  • ?Indique 0 ou 1
  • {2,10}?Le point d’interrogation utilisé ici signifie que seuls deux peuvent correspondre.
let hd="hdddd"
console.log(hd.match(/hd{2,10}?/g)); // ["hdd"]

30. La correspondance des balises interdit la cupidité

<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. Utilisez matchAll pour effectuer la correspondance globale

  • matchAllCorrespond à un objet itérable
  • <\/\1>Extraire '\1'la correspondance de représentation du contenu(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 avec la méthode matchAll pour les navigateurs de version inférieure

<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. Utilisez exec pour terminer la correspondance globale

<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éthode régulière de chaîne

  • search方法Renvoie l'indice lorsque le caractère correspond avec succès.
  • matchRenvoie un tableau de tous les caractères correspondants
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));
  • matchAllRenvoie des données itérables
    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. Remplacement du symbole $ dans les expressions régulières

// 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. Utilisation de groupes atomiques dans les projets

  1. Ajoutez s à http, ajoutez www sans www pour faire correspondre uniquement les personnes hdcms et hodun
<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. Aliasing de groupes atomiques

  • ?<con>Prendre un pseudonyme
<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>

Utilisez des alias de groupe atomique pour optimiser les expressions régulières

	<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éthodes régulières et chaînes

  • Méthodes de chaînematch matchAll search replace
  • méthode régulière testavecexec
<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. ?=Affirmer la correspondance

  • ?=Expressions conditionnelles
  • 公司Ajoutez un lien hypertexte vers les deux mots suivis de Baidu.
<main>在公司从事前端开发已经三年了，现在的公司是百度</main>
  <script>
		const mian=document.querySelector('main')
		let reg=/公司(?=是百度)/g   // 后面是谁的
		 mian.innerHTML=mian.innerHTML.replace(reg, `<a href="">$&</a>`)
	</script>

Utiliser des assertions pour normaliser les prix

  1. Il est nécessaire d'ajouter 0,00 au nombre devant le 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. ?<=Affirmer la correspondance

  • ?<= Instruction conditionnelle (indiquant de prendre l'assertion précédente)
  1. Remplacez tous les liens par 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>

Dissimulation des numéros de téléphone à l'aide d'assertions

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

41. ?!Affirmer la correspondance

  • ?!L'instruction conditionnelle indique que ce qui suit n'appartient à personne
  1. Faites correspondre les mots anglais qui ne sont pas suivis de chiffres
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. Restreindre les noms d'utilisateur

<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. ?<!Affirmer la correspondance

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. Utiliser l'élimination d'assertions pour unifier les données

  1. Ne remplacez pas osstout paross
	<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>

Résumer () [] {}les différentes significations de 1.0

  • () consiste à extraire la chaîne correspondante. Il y a autant de chaînes correspondantes correspondantes qu'il y a de () dans l'expression.
  • (\s*) représente une chaîne d'espaces consécutifs.
  • [] est la plage de caractères qui définit la correspondance. Par exemple, [a-zA-Z0-9] signifie que les caractères aux positions correspondantes doivent correspondre aux caractères et chiffres anglais. [\s*] représente un espace ou un signe *.
  • {} est généralement utilisé pour indiquer la longueur de la correspondance. Par exemple, \s{3} indique une correspondance avec trois espaces et \s{1,3} indique une correspondance avec un à trois espaces.
  • (0-9) correspond à « 0-9 » lui-même. [0-9]* correspond aux nombres (notez qu'il y a * après, il peut être vide) [0-9]+ correspond aux nombres (notez qu'il y a
    + après, il ne peut pas être vide) {1-9} est mal écrit.
  • [0-9]{0,9} représente une chaîne numérique d'une longueur de 0 à 9.

Les parenthèses () sont des groupes, principalement utilisés pour limiter la gamme d' exemples de structures à sélection multiple/regroupement/capture de texte/recherche/mode spécial :

  1. (abc|bcd|cde) signifie que ce paragraphe peut être l'un des abc, bcd et cde, et que l'ordre doit être cohérent.
  2. (abc) ?, signifie que ce groupe apparaît ensemble ou n'apparaît pas. S'il apparaît, il apparaîtra dans l'ordre au sein de ce groupe.
  3. (?:abc) signifie qu'un groupe comme abc est trouvé, mais il n'est pas enregistré ou sauvegardé dans une variable, sinon il peut être transmis via la variable, sinon il peut être transmisvariable, sinon vous pouvez utiliser $3 pour obtenir le contenu correspondant à (ccc), tandis que $4 obtient le contenu correspondant à (eee), car la première paire de crochets ne sauvegarde pas la variable.
  4. a(?=bbb) Un regard séquentiel signifie que a doit être suivi de 3 b consécutifs
  5. (?i:xxxx) Insensible à la casse (?s:.*) Correspondance croisée. Peut correspondre aux caractères de retour chariot

Les crochets sont un
exemple de correspondance unique, de jeu de caractères/jeu de caractères exclus/jeu de caractères nommé :

  1. [0-3] signifie que les caractères trouvés à cette position ne peuvent être que quatre nombres de 0 à 3. C'est similaire à (abc|bcd|cde), mais les parenthèses peuvent correspondre à plusieurs caractères consécutifs, et une paire de crochets ne peut correspondre qu'à un seul caractère
  2. [^0-3] signifie que les caractères trouvés à cette position ne peuvent être que tous les caractères sauf 0 à 3.
  3. [:digit:] 0-9 [:alnum:] A-Za-z0-9

Il y a une différence essentielle entre () et []

  1. Le contenu à l'intérieur de () représente une sous-expression. () lui-même ne correspond à rien, et n'est pas limité à correspondre à quoi que ce soit. Il traite simplement le contenu entre parenthèses comme la même expression, comme (ab){1,3 }, cela signifie cet ab apparaît ensemble au moins une fois et au plus 3 fois. S'il n'y a pas de parenthèses, ab{1,3} signifie a, suivi de b apparaissant au moins une fois et au plus 3 fois. De plus, les parenthèses sont importantes pour faire correspondre les modèles.
  2. [] signifie que les caractères correspondants sont entre [] et ne peuvent apparaître qu'une seule fois, et les caractères spéciaux écrits en [] seront comparés comme des caractères ordinaires. Par exemple, [(a)] correspondra aux trois caractères (, a,).

Je suppose que tu aimes

Origine blog.csdn.net/weixin_46104934/article/details/129000934
conseillé
Classement
du quotidien
Plus
2024-05-18(31)
2024-05-17(4)
2024-05-16(25)
2024-05-15(5)
2024-05-14(11)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(33)
2024-05-09(31)

Code World

© 2018 codetd.com