【你也能从零基础学会网站开发】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.value
var 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>
总的来说正则表达式其实就是对字符串的一种处理的匹配模式!
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇