🍉JavaScript进阶——正则表达式的那些事儿

简介: 🍉JavaScript进阶——正则表达式的那些事儿

学习目标:


  • 说出正则表达式的作用
  • 写出简单的正则表达式
  • 使用正则表达式对表单进行验证
  • 使用正则表达式替换内容


1. 正则表达式概述


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


1.1主要作用:


正则通常被用来检索、替换那些复合某种模式(规则)的文本,匹配,替换,提取。


1.2 正则表达式的特点


灵活性、逻辑性和功能性非常的强 可以迅速地用极简单的方式达到字符串的复杂控制。


对于刚接触的人来说,比较晦涩难懂 实际开发,一般都是直接复制写好的正则表达式,但是会要求会使用正则表达式并且根据实际情况修改正则表达式。


2. 正则表达式在js中的使用


<script>
        // 1. 利用RegExp对象来创建 正则表达式
        var regexp = new RegExp(/123/);
        console.log(regexp);
        // 2. 利用字面量创建 正则表达式
        var rg = /123/;
        // 3. test方法用来检测字符串是否符合正则表达式要求的规范
        console.log(rg.test(123));
        console.log(rg.test('abc'));
    </script>
    // 打印结果:
26-正则表达式.html:15 /123/
26-正则表达式.html:19 true
26-正则表达式.html:20 false
复制代码


3. 正则表达式中的特殊字符


3.1 正则表达式的组成


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


3.2 边界符


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


边界符 说明
^ 表示匹配行首的文本(以谁开始)
$ 表示匹配行尾的文本(以谁结束)


如果^和$在一起,表示必须是精确匹配


<script>
        // 边界符
        var rg = /^abc/;// 文本内容必须以abc开头
        console.log(rg.test('abc'));// true
        console.log(rg.test('abcd'));// true
        console.log(rg.test('ab'));// false
        console.log(rg.test('aabc'));// false
        var reg = /cd$/;// 文本内容必须以cd结尾
        console.log(reg.test('abcd'));// true
        console.log(reg.test('asdacd'));// true
        console.log(reg.test('dasdcf'));// false
        var reg1=/^abc$// 文本内容必须是abc才符合规范
    </script>
复制代码


3.3 字符类


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


1. /[abc]/(多选一)


只要包含有a或者b或者c都返回true


2. /^[a-z]$/(多选一)


26个英文字母任何一个字母返回true


3. /^[a-zA-Z0-9]$/字符组合(多选一)


上面一种方法限定了是小写字母。这种方法大写小写字母数字都可以匹配成功


4. /^[^a-zA-Z0-9]$/字符组合(多选一)


这种方法是第3种方法的取反,不是这些字符才匹配成功。


3.4 量词符


量词 说明
* 重复零次或更多次
+ 重复一次或更多次
重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n次或m次


var reg=/^a*$/ a出现0次或更多次
var reg=/^a+$/ a出现1次或更多次
var reg=/^a?$/ a出现0次或1次
var reg=/^a{3}$/ a出现3次
var reg=/^a{3,}$/ a出现3次或更多次
var reg=/^a{3,5}$/ a出现3到5次
复制代码


3.5 量词的主要作用


设定某个模式出现的次数


var reg =/^[a-zA-Z0-9_-]$/
这个模式用户只能输入英文字母数字下划线短横线但是有边界符和[]这就限定了只能多选1
var reg1 =/^[a-zA-Z0-9_-]{6,16}$/
而对这个正则表达式来说,6到16位的上述字符串都能匹配成功
// {6,16} 中间不要有空格
复制代码


案例:用户名验证


61034ab211214cb3a446f45c3bfd1b05_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


3.6 预定义类


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


预定义类 说明
\d 匹配0-9之间的任一数字
\D 匹配0-9以外的字符
\w 匹配任意的字母、数字和下划线
\W \w以外的字符
\s 匹配空格包含换行符、制表符、空格符等相当于[\t\r\n\v\f]
\S 匹配非空格的字符


4. 正则表达式中的替换


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


HTML部分


<textarea></textarea>
<div class='geshi'></div>
<button>输出</button>
复制代码


JS部分


var text = document.querySelector('textarea');
var btn =document.querySelector('button')
var div=document.querySelector('div')
btn.onclick=function(){
  div.innerHTML=text.value.replace(/激情/g,'**');
}


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