JavaScript:正则表达式

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

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

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

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

相关推荐
XiaoLeisj26 分钟前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师1 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
逐·風1 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
捕鲸叉2 小时前
创建线程时传递参数给线程
开发语言·c++·算法
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
A charmer2 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq2 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
Yaml42 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
追风林3 小时前
mac 本地docker-mysql主从复制部署
mysql·macos·docker