【你也能从零基础学会网站开发】Web建站之javascript入门篇 简单认识一下正则表达式

本文主要是介绍【你也能从零基础学会网站开发】Web建站之javascript入门篇 简单认识一下正则表达式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

为什么使用正则表达式

在这之前曾有过字符验证例子,其中验证字符的代码非常繁琐冗长。

有了正则表达式,验证程序的代码变得简洁而更强大,代码运行的速度更快。

举个栗子

为了判断某个字符串是否符合某种格式,使用正规表达的最为合适。通常,人们在表单数据发送到服务器之前,都需要进行数据合法性验证。

例如,客户所填写的电子邮件地址格式是否正确等。
使用正则表达式可以使程序代码简单高效

RegExp对象

RegExp是JavaScript提供的一个对象,用来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例。

JavaScript使用RegExp对象封装与正则表达式相关的功能和操作,每一个该对象的实例对应着一条正则表达式。

和其他对象一样,在使用之前必须取得其引用或新建一个对象实例。

语法如下

var regObj = new RegExp( 'pattern' [,'flags'] );

参数说明

pattern:必选项,正则表达式的字符串。
flags:可选项,是一些标志组合。

在标志组合中,g表示全局标志。
设定时将搜索整个字符串,以找匹配的内容,每一次新的探索都从RegExp对象的lastIndex标记的字符起,否则只搜索到第一个匹配的内容。i表示忽略大小写标志,若设置该项,则在搜索匹配项时忽略大小写,否则将区别大小写。以上所述是创建正则表达式对象的方式之一,另一种创建方式如下

var regObj = /pattern/[flags];

参数的意义和第一种方式一样,但这种方式不能用引号将pattern和flags括起来。正则表达式的使用非常简单,只要用一个test方法就行了,如下所示:

regObj.test( string );

regObj表示正则表达式对象,是一个RegExp对象实例。
string为源字符串,即将在其中进行匹配操作的字符串。

test方法返回一个布尔值,表明是否已经在源串中找到了正则表达式所定义的模式。

元字符

元字符是正则表达式最为简单的情况。它指的是与字符序列相匹配

举个栗子

var filter = /一枪爆头/g;		// 将受限制的词句组成正则表达式
var said = "他被人一枪爆头了";	// 将接受检查的语句
if (filter.test(said))		    // 如果被检查语句中存在受限词句
{alert("该语句中有限制级词语,系统已经过滤!");   // 显示警告
} else			// 否则
{alert(said);// 输出原话
}

量词

量词就是指定某个特定模式出现的次数。分为简单量词、贪婪量词、惰性量词和支配量词几种。

目前IE浏览器并没有实现这些特性,下面简单的介绍这几种量词。
贪婪量词,它是首先匹配整个字符串,如果不匹配,则去掉最后一个字符,然后再比较。如果仍然不匹配,则继续去掉最后一个字符再比较,如此一直下去,直到找到匹配或者字符串的字符被取完为止。
惰性量词是先看字符串中的第一个字符是不是匹配。如果不匹配,就读入下一个字符,将这两个字符连接成一个字符串。如果还是不匹配,则继续从字符串添加字符直到发现匹配或找完整个字符串为止。

支配量词,它只尝试整个字符串的匹配,如果不能匹配,则不再尝试,也就说它只比较一次。

举个栗子

我们可以来写一个简单的程序来判断用户名是否合法

function check() {var use = username.value;			//取得用户的输入var regx = /[a-z0-9]\w\d/g;			//验证输入的正则表达式if (!regx.test(use)) 			//不包含规定字符,用户名无效{alert("\n用户名检测 : \n\n结果 : 用户名不合法! \n");username.focus();			//获得焦点} else {alert("\n用户名检测 : \n\n结果 : 用户名合法! \n");//提示用户输入合法}
}
<input type="text" id="username" value="">
<input type="submit" value="合法性检测" onClick="check()">

分组模式

前面用简单模式可以找整个表达式的结果,但是如果要找的是表达式内的子表达,或者找的是目标字符串中重复出现子串,则仅仅依靠前面的简单模式的知识是绝对无法实现的。

为了解决上面的问题,正则表达式引入分组的概念。
它的语法是“(pattern)”,也就是用括号括起一些字符、字符类或量词,它是一个组合项或子匹配,可统一操作。

举个栗子

var showStr = "";				//定义一个变量,并赋空值
var str = "this word is OKOKOKOKokokokok!!!"; 		//给变量赋初值
var searchStr = /(OK){2}/gi; 			//分组的正则表达式
var result = str.match(searchStr); 			//查找匹配
for (var i = 0; i < result.length; i++)			//循环访问arrdata对象
{showStr += result[i] + "\n"; 			//显示信息
}
alert("一共有" + result.length + "组匹配\n" + showStr);		//显示最后匹配的结果

候选模式

候选就是用“|”来表示的模式或关系,它表示的是在匹配时可以匹配“|”的左边或右边。这个“|”相当于“或”。
这个功能一般用在检验某个指定的字符串是否存在。

举个栗子

var str1 = "I like red and black";// 给字符串赋初值
var str2 = "she likes black"; // 给字符串赋初值
var result = /(red|black)/;	//候选正则表达式
reStr=result.test(str1);	//用test方法检查字符串是否存在
alert(result.test(str2));	//返回的值为bool型,即true或flase,这里返回的是true
alert(reStr)		//返回true

邮箱验证

验证电子邮件
正确格式的电子邮件地址如xx1209@163.com,它必须符合以下几个条件。电子邮件地址中同时含有@.字符;字符@后必须有字符“.”,且中间至少间隔一个字符;字符“@”不为第一个字符,“.”不为最后一个字符。

所有的电子邮件都是这样的。
根据上述条件,可构造验证电子邮件地址的正则表达式如下所示:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

举个栗子

function check(obj) {var emailUrl = obj.email.valuevar regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 	//构造正则表达式进行检验if (!regex.exec(emailUrl)) 				//取得用户的输入{alert("您输入的格式有误,可能您好忘记了@符号或是点号!请重新输入");obj.m_email.focus()			//取得焦点} else {alert("输入正确!");			//通过验证return true;				//提交表单}
}
<center><p>验证电子邮件地址合法性</p><form onSubmit="return check(this);" name="form1">        <!--表单--><input type="text" name="email">        <!--用户输入email的文本框--><input type="submit" value="确定">        <!--提交按钮--></form>
</center>

总的来说正则表达式其实就是对字符串的一种处理的匹配模式!

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

这篇关于【你也能从零基础学会网站开发】Web建站之javascript入门篇 简单认识一下正则表达式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/810375

相关文章

Java五子棋之坐标校正

上篇针对了Java项目中的解构思维,在这篇内容中我们不妨从整体项目中拆解拿出一个非常重要的五子棋逻辑实现:坐标校正,我们如何使漫无目的鼠标点击变得有序化和可控化呢? 目录 一、从鼠标监听到获取坐标 1.MouseListener和MouseAdapter 2.mousePressed方法 二、坐标校正的具体实现方法 1.关于fillOval方法 2.坐标获取 3.坐标转换 4.坐

墨刀原型工具-小白入门篇

墨刀原型工具-小白入门篇 简介 随着互联网的发展和用户体验的重要性越来越受到重视,原型设计逐渐成为了产品设计中的重要环节。墨刀作为一款原型设计工具,以其简洁、易用的特点,受到了很多设计师的喜爱。本文将介绍墨刀原型工具的基本使用方法,以帮助小白快速上手。 第一章:认识墨刀原型工具 1.1 什么是墨刀原型工具 墨刀是一款基于Web的原型设计工具,可以帮助设计师快速创建交互原型,并且可以与团队

Spring Cloud:构建分布式系统的利器

引言 在当今的云计算和微服务架构时代,构建高效、可靠的分布式系统成为软件开发的重要任务。Spring Cloud 提供了一套完整的解决方案,帮助开发者快速构建分布式系统中的一些常见模式(例如配置管理、服务发现、断路器等)。本文将探讨 Spring Cloud 的定义、核心组件、应用场景以及未来的发展趋势。 什么是 Spring Cloud Spring Cloud 是一个基于 Spring

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理,跟着敲一遍,有个印象,然后把它保存到本地,以后要用再去看,如果有了新东西,你自个再添加。这是我参考牛客上的shell编程专项题,只不过换成了问答的方式而已。不用背,就算是我自己亲自敲,我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值:简单的数据即基础数据类型,按值访问。 引用值:由多个值构成的对象即复杂数据类型,按引用访问。 动态属性 对于引用值而言,可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J

java8的新特性之一(Java Lambda表达式)

1:Java8的新特性 Lambda 表达式: 允许以更简洁的方式表示匿名函数(或称为闭包)。可以将Lambda表达式作为参数传递给方法或赋值给函数式接口类型的变量。 Stream API: 提供了一种处理集合数据的流式处理方式,支持函数式编程风格。 允许以声明性方式处理数据集合(如List、Set等)。提供了一系列操作,如map、filter、reduce等,以支持复杂的查询和转

一份LLM资源清单围观技术大佬的日常;手把手教你在美国搭建「百万卡」AI数据中心;为啥大模型做不好简单的数学计算? | ShowMeAI日报

👀日报&周刊合集 | 🎡ShowMeAI官网 | 🧡 点赞关注评论拜托啦! 1. 为啥大模型做不好简单的数学计算?从大模型高考数学成绩不及格说起 司南评测体系 OpenCompass 选取 7 个大模型 (6 个开源模型+ GPT-4o),组织参与了 2024 年高考「新课标I卷」的语文、数学、英语考试,然后由经验丰富的判卷老师评判得分。 结果如上图所

Vim使用基础篇

本文内容大部分来自 vimtutor,自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下,然后再分别介绍正常模式,插入模式,和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式(Normal模式) 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法: public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM

详细分析Springmvc中的@ModelAttribute基本知识(附Demo)

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上,或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景: 表单处理:通过 @ModelAttribute 将表单数据绑定到模型对象上预处理逻辑:在请求处理之前