JavaScript 进阶第十一章(正则表达式)(完结)

简介: JavaScript 进阶第十一章(正则表达式)(完结)

了解正则表达式的作用


  1. 掌握正则表达式的使用


  • 创建正则表达式
  • 正则表达式组成
  • 边界符
  • 字符类


  • 正则测试


正则表达式概述


1.什么是正则表达式


正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。


正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。


2.正则表达式的特点


  1. 灵活性、逻辑性和功能性非常的强。


  1. 可以迅速地用极简单的方式达到字符串的复杂控制。


  1. 对于刚接触的人来说,比较晦涩难懂。比如:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$


正则表达式在js中的使用


1.正则表达式的创建


在 JavaScript 中,可以通过两种方式创建一个正则表达式。


方式一:通过调用RegExp对象的构造函数创建


let regexp = new RegExp(/123/);
console.log(regexp);


方式二:利用字面量创建 正则表达式


let rg = /123/;


2.测试正则表达式


test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。


let rg = /123/;
console.log(rg.test(123)); // 匹配字符中是否出现123  出现结果为true
console.log(rg.test('abc')); // 匹配字符中是否出现123 未出现结果为false


20210904200919304.png


正则表达式中的特殊字符


1.正则表达式的组成

一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ 。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ 、$ 、+ 等。


参考文档:


https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions


2.边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符


202109042012454.png


3.字符类

字符类表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。


1. [ ] 方括号


表示有一系列字符可供选择,只要匹配其中一个就可以了


let rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy')); // true
console.log(rg.test('baby')); // true
console.log(rg.test('color')); // true
console.log(rg.test('red')); // false
let rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
console.log(rg1.test('aa')); // false
console.log(rg1.test('a')); // true
console.log(rg1.test('b')); // true
console.log(rg1.test('c')); // true
console.log(rg1.test('abc')); // true
----------------------------------------------------------------------------------
let reg = /^[a-z]$/ // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
console.log(reg.test('a')); // true
console.log(reg.test('z')); // true
console.log(reg.test('A')); // false
-----------------------------------------------------------------------------------
// 字符组合
let reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
------------------------------------------------------------------------------------
//取反 方括号内部加上 ^ 表示取反,只要包含方括号内的字符,都返回 false 。
let reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a')); // false
console.log(reg2.test('B')); // false
console.log(reg2.test(8)); // false
console.log(reg2.test('!')); // true


2.量词符


量词符用来设定某个模式出现的次数。


20210904201634541.png


3.括号总结


1.大括号 量词符. 里面表示重复次数


2.中括号 字符集合。匹配方括号中的任意字符.


3.小括号表示优先级


4.预定义类


预定义类指的是某些常见模式的简写方式.


20210904201854621.png


4.正则替换replace


replace() 方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。


let str = 'andy和red';
let newStr = str.replace('andy', 'baby');
console.log(newStr)//baby和red
// 等同于 此处的andy可以写在正则表达式内
let newStr2 = str.replace(/andy/, 'baby');
console.log(newStr2)//baby和red
// 全部替换
let str = 'abcabc'
let nStr = str.replace(/a/,'哈哈')
console.log(nStr) //哈哈bcabc
// 全部替换g
let nStr = str.replace(/a/a,'哈哈')
console.log(nStr) // 哈哈bc哈哈bc
// 忽略大小写i
let str = 'aAbcAba';
let newStr = str.replace(/a/gi,'哈哈') // "哈哈哈哈bc哈哈b哈哈"


致读者:


     以上就是JavaScript进阶篇的全部内容啦,如果你有耐心从最初的JavaScript入门学到了这里,那么恭喜你,你的JavaScript基础就已经非常扎实了,可以考虑学习jq或者框架啦,


接下里我们会进入jq的学习 加油哦!!!


相关文章
|
23天前
|
自然语言处理 JavaScript 前端开发
JavaScript 正则表达式
JavaScript 正则表达式
11 3
|
2月前
|
JavaScript 前端开发
js中通过正则表达式验证邮箱是否合法
这篇文章提供了一个JavaScript示例,通过正则表达式在网页上验证用户输入的邮箱地址是否合法,并给出了相应的提示信息。
js中通过正则表达式验证邮箱是否合法
|
3月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
51 1
|
3月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
41 2
|
3月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
76 2
|
3月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
49 0
|
3月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
78 0
|
3月前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
110 0
|
3月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
73 0
|
3月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第6天】JavaScript的Web Workers和Service Worker增强了浏览器的性能处理和离线功能。Web Workers处理后台计算,减轻主线程压力,但通信有开销,受同源策略限制。Service Worker则能拦截网络请求,支持离线缓存和推送通知,但其生命周期和权限管理需谨慎处理。通过理解它们的工作原理和限制,开发者能创建更流畅、更健壮的Web应用。
50 0
下一篇
无影云桌面