JavaScript：正则表达式

大家好，欢迎来到IT知识分享网。

1 正则表达式1:

// – 用户名、密码、电子邮件…

– 正则表达式用来描述一个关于字符串的规则

程序可以根据这个规则来识别一个字符串是否符合要求

或者从一个字符串中提取出符合要求的内容

// 创建一个正则表达式 // 通过构造函数来创建一个正则的对象 // 语法： new RegExp('正则表达式','匹配模式'); // 使用typeof检查一个正则对象时，会返回 "object" var reg = new RegExp('a'); // 正则表达式 a，用来检查一个字符串中是否含有a // test() 用来检查一个字符串是否符合正则表达式的要求 // 如果符合，返回true， 如果不符合返回false var result = reg.test('a'); // true result = reg.test('abc'); // true result = reg.test('bcabc'); // true result = reg.test('bcd'); // false reg = new RegExp('ab'); result = reg.test('abcd'); console.log(result);

2 正则表达式2:

// (字面量)创建一个正则表达式，来检查一个字符串是否是abc var reg = /abc/; var result = reg.test('abc'); // 创建一个正则，检查一个字符串是否是以a开头 /* ^ 表示字符串的开始位置 $ 表示字符串的结束位置 */ reg = /^a/; // 匹配以a开头的字符串 reg = /c$/; // 匹配以c结尾的字符串 // result = reg.test('vabcv'); // 如果一个正则表达式以^ 开始，以$ 结束，则要求字符串要和正则表达式完全匹配 reg = /^a$/;// 匹配只有一个a的字符串 result = reg.test('aa'); // 创建一个正则表达式，来检查一个字符串是否是abc reg = /^abc$/; result = reg.test('abc'); //true result = reg.test('bbabc'); //false result = reg.test('abcee'); //false // [] 表示的一个字符 reg = /^a[be]c$/; //abc aec result = reg.test('abc');//true result = reg.test('aec');//true result = reg.test('abec');//false result = reg.test('ac');//false reg = /^abc|aec$/; // 以abc开头或者以aec结尾 result = reg.test('abc');// true result = reg.test('abcasdasdasdsd');// true result = reg.test('asdasdasdaec');// true reg = /^abc$|^aec$/;//字符串是abc或这是aec result = reg.test('abcd');//false result = reg.test('aec');//true result = reg.test('baec');//false console.log(result);

3正则表达式3量词:

//创建一个正则来检查一个字符串是否是bbb var reg = /^bbb$/; var result = reg.test('bbb'); //true result = reg.test('b'); //false result = reg.test('bb'); //false result = reg.test('bbbb'); //false /* 量词 - 量词用来指定字符出现的次数 {n} 字符正好出现n次 {n,} 表示n次以上（大于等于n） {n,m} 表示n-m次 + 表示1次以上，相当于{1,} * 表示0次或多次 ? 表示0次或1次 量词只对它的前一位字符起作用 */ reg = /^b{2}$/; result = reg.test('bb'); // true reg = /^b{2,}$/; result = reg.test('bbb'); // true reg = /^b{2,4}$/; result = reg.test('bb');// true result = reg.test('bbb');// true result = reg.test('bbbb');// true result = reg.test('bbbbb');// false reg = /^ab+$/ result = reg.test('abbb'); // true reg = /^ab*$/ result = reg.test('a'); //true reg = /^ab?$/ result = reg.test('a');// true result = reg.test('ab');// true result = reg.test('abb');// false reg = /^a[bcdefg]+$/; result = reg.test('abcdefg'); //true result = reg.test('ab'); //true result = reg.test('ac'); //true result = reg.test('afg'); //true // 检查一个字符串是否出现了1次以上的ab // 正则表达式中，可以使用()来为字符分组 reg = /^(ab)+$/; result = reg.test('ababab'); //true result = reg.test('abb'); //false reg = /^a(b|e)c$/; // 等价于 /^a[be]c$/ result = reg.test('abc');//true result = reg.test('aec');//true result = reg.test('xxxaec');//false result = reg.test('abec');//false console.log(result);

4正则练习手机号:

创建一个正则表达式，可以用来检查一个字符串是否是一个手机号

1 3

1开头 第二位3-9任意数字 任意数字9位结尾

^1 [3-9] [0-9]{9}$

// ^1[3-9][0-9]{9}$ var phoneReg = /^1[3-9][0-9]{9}$/; console.log(phoneReg.test('')); console.log(phoneReg.test('')); console.log(phoneReg.test('')); console.log(phoneReg.test('89')); console.log(phoneReg.test(''));

5正则和字符串相关方法:

search()

– 用来搜索一个字符串中是否含有指定内容

– 如果找到了会返回内容第一次出现的索引，如果没有找到则返回-1

– 可以接受一个正则表达式作为参数，这样将会根据正则表达式去搜索内容

split()

– 用来将一个字符串拆分一个数组

– 可以根据一个正则表达式来拆分字符串

replace()

– 使用一个新内容，替换字符串中的已有内容

– 参数：

第一个，被替换的内容

第二个，新的内容

match()

– 用来根据正则表单式将字符串中符合条件的内容提取出来

– 如果匹配到了元素，它会返回一个数组，将结构存储在数组中

– 如果没有匹配到元素，它会返回一个null

– 默认指匹配第一个符合条件的元素

var str = 'hello'; var result = str.search('ll'); result = str.search('o'); result = str.search('a'); result = str.search('l'); result = str.search(/l/); str = 'acc adc aec afc agc'; // 查询字符串是否含有abc 或 aec // result = str.search(/a[be]c/); str = '孙悟空abc猪八戒aec沙和尚'; result = str.split(/a[be]c/); str = 'Hello How are you!'; result = str.replace(/How/, '哈哈'); // 替换默认情况下，只会替换第一个，如果需要替换所有的需要指定一个全局匹配模式g // i 忽略大小写 g 全局匹配 str = 'abc adc aec afc agc Aec'; result = str.replace(/a[be]c/ig, '哈哈'); str = 'dasdafsgfdgafsdfasfsdfasf'; var phoneReg = /1[3-9][0-9]{9}/g; result = str.match(phoneReg); console.log(result);

6正则表达式 元字符:

//创建一个正则表达式，可以检查一个字符串中是否含有. // . 可以用来匹配除了换行(\n)以外的任意字符 var reg = /./; var result = reg.test('a'); // 可以在正则表达式中使用 \ 作为转义字符 reg = /\./; result = reg.test('.'); /* \w- 任意的单词字符，等价于 [A-Za-z0-9_] \W- 除了单词字符，等价于 [^A-Za-z0-9_] \d- 任意数字 [0-9] \D- 除了数字 [^0-9] \s- 空格 \S- 除了空格 \b- 单词边界 \B - 除了单词边界 */ reg = /\w/; reg = /\W/; reg = /\d/; reg = /\D/; reg = /\s/; reg = /\S/; result = reg.test('b'); //创建一个正则表达式，检查一个字符串中是否含有child这个单词 reg = /\bchild\b/; result = reg.test('abcchildren'); // false result = reg.test('child'); // true result = reg.test('hello child'); // true console.log(result);

7 去除空格练习:

var str = 'hello hello how are you!'; var reg = /\bhow\b/; reg = /\byou\b/; // console.log(reg.test(str)); // 获取用户输入的一个用户名 var username = prompt('请输入一个用户名：'); console.log('--'+username+'--'); //通过正则表达式去除username的前后空格 //将username中的空格替换为空串 // username = username.replace(/\s/g,''); username = username.replace(/^\s+|\s+$/g,''); console.log('--'+username+'--');

8邮箱格式练习:

编写一个用来检查一个字符串是否是正确的邮箱地址的正则表达式

jinlian.pan @abc.com

abc .xxx @ hello .com .cn

任意的字母数字下划线一位以上 .任意字母数字下划线一位以上

\w+ (\.\w+)*

@ 任意字母数字-一位以上 .字母2到5位 .字母2到5位

@ [a-z0-9-]+ (\.[a-z]{2,5}){1,2}

// 1 var emailReg = /^\w+(\.\w+)*@[a-z0-9-]+(\.[a-z]{2,5}){1,2}$/i; console.log(emailReg.test('')); // 2 var youx = prompt('邮箱地址') var rea= /^\w+(\.\w+)*@([a-z0-9])+(\.[a-z]{2,5}){1,2}$/i console.log(rea.test(youx))

9 正则补充方法和贪婪模式:

//创建一个正则表达式 // 正则表达式贪婪模式，通过量词去匹配内容，它会尽可能多的去匹配 // 可以通过在量词后边写?，来关闭贪婪模式 var reg = /ab+?/; reg = /ab*?/; reg = /ab??/; // console.log(reg.test('abb')); var str = 'abbbcc'; var result = str.match(reg); // console.log(result[0]); str = 'dasdafsgfdgafsdfasfsdfasf'; var phoneReg = /1[3-9][0-9]{9}/g; // result = str.match(phoneReg); /* exec() 是正则表达式的方法，用来从字符串中匹配内容 作用和match类似，不同点在于它是正则的方法，match是字符串的方法 同时exec() 一次只会匹配一个结果，即使你设置全局匹配 */ // phoneReg = /1[3-9]([0-9]{5})([0-9]{4})/g; // result = phoneReg.exec(str); // console.log(result[1]); //练习: str = ` 
  
 
   
HTML DOM 树
 
    
  
`; // 编写正则表达式，提取出字符串中图片的路径 reg = /src="(.+?)"/; result = reg.exec(str); console.log(result[1]);

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#2023年度创作挑战##文章首发挑战赛##跨年幸运签##我的2024年度运势##挑战30天在头条写日记##我的2024年度运势##微头条激励计划##程序员##正则表达式##web网站##it##vue##react#