JavaScript：正则表达式

俊哥前端工程师2024-01-11 23:04

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

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

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

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

相关推荐
supermapsupport1 分钟前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg3 分钟前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
小_太_阳7 分钟前
Scala_【2】变量和数据类型
开发语言·后端·scala·intellij-idea
胡西风_foxww9 分钟前
【es6复习笔记】rest参数（7）
前端·笔记·es6·参数·rest
直裾10 分钟前
scala借阅图书保存记录（三）
开发语言·后端·scala
m0_7482548811 分钟前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
唐 城31 分钟前
curl 放弃对 Hyper Rust HTTP 后端的支持
开发语言·http·rust
星就前端叭1 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲（webFont、font-spider、spa-font-spider-webpack-plugin）
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明0719个Web前端交互式3D JavaScript框架和库08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO