🍉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,'**');
}


相关文章
|
10天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
10天前
|
Python Windows
【Python进阶必备】一文掌握re库:实战正则表达式
【Python进阶必备】一文掌握re库:实战正则表达式
14 0
|
10天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
31 0
|
4天前
|
数据安全/隐私保护 Python
Python进阶---正则表达式
Python进阶---正则表达式
10 2
|
8天前
|
前端开发 JavaScript
前端 js 经典:正则表达式
前端 js 经典:正则表达式
14 2
|
9天前
|
JavaScript 前端开发 测试技术
学会JavaScript正则表达式(二)
学会JavaScript正则表达式(二)
|
9天前
|
机器学习/深度学习 JavaScript 前端开发
学会JavaScript正则表达式(一)
学会JavaScript正则表达式(一)
|
10天前
|
XML JavaScript 前端开发
【JavaScript | RegExp】正则表达式
【JavaScript | RegExp】正则表达式
14 4
|
10天前
|
JavaScript 索引
记录_js正则表达式
记录_js正则表达式
8 0
|
10天前
|
JavaScript 前端开发 索引
JavaScript中的正则表达式:使用与模式匹配
【4月更文挑战第22天】本文介绍了JavaScript中的正则表达式及其模式匹配,包括字面量和构造函数定义方式,以及`test()`、`match()`、`search()`和`replace()`等匹配方法。正则表达式由元字符(如`.`、`*`、`[]`)和标志(如`g`、`i`)组成,用于定义搜索模式。文中还分享了正则使用的技巧,如模式分解、非捕获分组和注释。掌握正则表达式能提升文本处理的效率和代码质量。