正则表达式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 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'); // 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邮箱格式练习:

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

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'));
// 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 = '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创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

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

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

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

#2023年度创作挑战#

于正则表达式，开发者如何跳出云里雾里的谜团？

作者 | Chris Achard

译者 | 弯月，责编 | 郭芮

出品 | CSDN（ID：CSDNnews）

以下为译文：

正则表达式能在字符串中查找匹配特定模式的子字符串。

在JavaScript中，可以通过斜线 / / 来创建，也可以通过new RegExp来创建，然后就能使用match、test、replace等方法。你可以事先定义正则表达式，也可以在调用方法时随时定义。

每次匹配一个字符，将多个字符放到方括号 中可以匹配多个匹配的字符。

用横线 - 匹配字符范围。

在正则表达式末尾添加额外的标记来修改匹配器的行为。

JavaScript支持如下标记：

• i = 不区分大小写

• m = 多行匹配

• g = 全局匹配（查找所有匹配，而不是仅查找一个）

在模式开头使用箭头 ^ 表示“字符串开头”。

在模式末尾使用美元符号 $ 表示“字符串结尾”。

将多个模式放在一起以匹配更长的字符串。

使用通配符和特殊的转义字符来匹配字符类。

. = 除了换行之外的任何字符。

• \d = 数字

• \D = 非数字

• \s = 空白

• \S = 非空白

• \n = 新行

用数量修饰符来匹配特定数量的字符。

• * = 零个或多个

• + = 一个或多个

• ？= 零个或一个

• {3} = 正好3个

• {2,4} = 2, 3, 或4个

• {2,} = 2或多个

使用括号 来分组。

match会返回完整的匹配，外加每个分组，除非你使用了g标记。

在括号 内使用管道符号 | 来表示分组的匹配内容。

• | = 或者

要匹配特殊字符，需要用反斜杠 \ 将其转义。

JS正则表达式中的特殊字符包括：^ $ \ . * + ? { } |

所以，要想匹配星号，需要使用：

• \*

• 而不能仅使用 *

要想匹配除了特定字符之外的任意字符，可以在方括号内使用^。

这意味着 ^ 有两种含义，可能会造成混淆。

当它出现在正则表达式开头时，它表示“字符串开头"；出现在方括号内时，表示“不是这些字符串”。

正则表示可以用来查找并匹配各种东西，比如URL和文件名。

但是！对于非常复杂的任务，使用正则表达式时一定要小心，比如分析电子邮件（你很容易就会弄得一团糟），或者分析HTML（HTML不是正规的语言，所以没办法完全使用正则表达式来解析）。

但是，对于绝大多数Web开发者来说，掌握这些最基本的组成部分就够了。

原文：https://dev.to/chrisachard/intro-to-regex-for-web-developers-2fj4

作者：Chris Achard，程序员，日常使用JS, React, Rails和Node，在egghead.io上讲课。

本文为 CSDN 翻译，转载请注明来源出处。

【END】