JavaScript：正则表达式

1 正则表达式1:

// - 用户名、密码、电子邮件...

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

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

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

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

2 正则表达式2:

// (字面量)创建一个正则表达式，来检查一个字符串是否是abcvar 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');// 创建一个正则表达式，来检查一个字符串是否是abcreg = /^abc$/;result = reg.test('abc'); //trueresult = reg.test('bbabc'); //falseresult = reg.test('abcee'); //false// [] 表示的一个字符reg = /^a[be]c$/; //abc aecresult = reg.test('abc');//trueresult = reg.test('aec');//trueresult = reg.test('abec');//falseresult = reg.test('ac');//falsereg = /^abc|aec$/; // 以abc开头或者以aec结尾result = reg.test('abc');// trueresult = reg.test('abcasdasdasdsd');// trueresult = reg.test('asdasdasdaec');// truereg = /^abc$|^aec$/;//字符串是abc或这是aecresult = reg.test('abcd');//falseresult = reg.test('aec');//trueresult = reg.test('baec');//falseconsole.log(result);

3正则表达式3量词:

//创建一个正则来检查一个字符串是否是bbbvar reg = /^bbb$/;var result = reg.test('bbb'); //trueresult = reg.test('b'); //falseresult = reg.test('bb'); //falseresult = 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'); // truereg = /^b{2,}$/;result = reg.test('bbb'); // truereg = /^b{2,4}$/;result = reg.test('bb');// trueresult = reg.test('bbb');// trueresult = reg.test('bbbb');// trueresult = reg.test('bbbbb');// falsereg = /^ab+$/result = reg.test('abbb'); // truereg = /^ab*$/result = reg.test('a'); //truereg = /^ab?$/result = reg.test('a');// trueresult = reg.test('ab');// trueresult = reg.test('abb');// falsereg = /^a[bcdefg]+$/;result = reg.test('abcdefg'); //trueresult = reg.test('ab'); //trueresult = reg.test('ac'); //trueresult = reg.test('afg'); //true// 检查一个字符串是否出现了1次以上的ab// 正则表达式中，可以使用()来为字符分组reg = /^(ab)+$/;result = reg.test('ababab'); //trueresult = reg.test('abb'); //falsereg = /^a(b|e)c$/; // 等价于 /^a[be]c$/result = reg.test('abc');//trueresult = reg.test('aec');//trueresult = reg.test('xxxaec');//falseresult = reg.test('abec');//falseconsole.log(result);

4正则练习手机号:

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

1 3 843436188

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('13843436188'));console.log(phoneReg.test('1384343618'));console.log(phoneReg.test('1184343618'));console.log(phoneReg.test('1184343618889'));console.log(phoneReg.test('23843436188'));

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 = 'dasda13715433267fsgfdgafs13867545679dfasfsdfasf';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'); // falseresult = reg.test('child'); // trueresult = reg.test('hello child'); // trueconsole.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邮箱格式练习:

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

101010101

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('jinlian.pan@abc.com'));
// 2var youx = prompt('邮箱地址')var rea= /^\w+(\.\w+)*@([a-z0-9])+(\.[a-z]{2,5}){1,2}$/iconsole.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 = 'dasda13715433267fsgfdgafs13867545679dfasfsdfasf';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 = `<div><h2>HTML DOM 树</h2><img src="/i/ct_htmltree.gif" alt="HTML DOM Node Tree" /></div>`;// 编写正则表达式，提取出字符串中图片的路径reg = /src="(.+?)"/;result = reg.exec(str);console.log(result[1]);

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

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

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

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

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

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