正则系列——JavaScript正则表达式入门心得

我发现有个别字符被这个编辑器给刷掉了,但是灰色区域显示正常,以灰色区域代码为准

什么玩意?

在我刚开始学习编程的时候,就听过正则了,也听说正则很牛逼,懂正则的更牛逼。但是苦于没有人指点,也没有使用正则的场景,自己看教程又懵逼,直到现在,才发现了入门的诀窍。

在不同的编程语言中,正则表达式的写法会有所不同,这里我们讨论的是JavaScript正则写法。

学习正则,不要凭空想象,要使用开发工具去测试,推荐你使用在线正则测试网站:https://regex101.com,或者使用浏览器控制台。

最简单的正则

正则在自然语言处理中广泛运用到,对前端开发者来说,最常见的正则是表单上的一些验证。如果你不熟悉正则,在写表单的时候,是从网上直接搜索某某正则的写法,然后copy过来。

但是,在你看完这篇文章之后,我希望你可以直接写出一些简单的正则,不再需要百度了。

现在介绍一种最简单的正则(匹配指定的文本):
下面是一段美文,我们现在想把里面的某个字,比如(),匹配出来。

var s = '前世茫茫人海的擦肩,种了今生的遇见,在花海的某一朵间,是你最美的笑颜。繁花三千,只为一人留恋,几度春秋,只等你花开的一面。多少来来回回,梦里若隐若现,举着思念的酒盏,轻酌夜色微凉,让回忆的美好舞翩翩。搁浅了时光,静默缘分的一端,远处的风景,依然是你微笑的眉眼。'
s.match(/的/g)

我们使用到了match方法来做匹配,来分析一下这个写法,s表示字符串,g表示全局匹配,如果去掉g,只能匹配出来第一个()。
是不是最简单的正则?你需要匹配什么内容,就直接在//之间写这个字符,然后正则系统会自动从字符串去查找。
可能这样说不是很直观,我奉献一张101的截图,特别关注红框部分,最上边是正则的输入框,下面是字符串,右边是匹配出来的字符:

常用正则方法了解

上面的例子中,使用到了match(),可以匹配出来字符,并且返回值是一个数组。还有一个常用的方法是test()test的返回值是bool类型,通常用来写在if语句中判断一个字符串是否满足正则表达式,在表单验证中经常用到。还有一个常用的方法是replace(),replace和match比较像,都能匹配出字符,但是replace还有第二个参数可以做字符替换。
下面我们会讲到三个方法的具体使用场景。往下看!

test()

正则有各种各样的符号,一般很难背下来,但是常用的符号多练习几遍,印象就会深刻。

我们用实际的例子来分析test()以及正则的实现,以注册表单为例:
test()和match()写法刚好反过来,test是正则写在前面,字符串写到函数的参数中。

场景1:账号只能是数字

看到这样一道题目,你首先要思考2个字——“规则”,账号是主体,账号的规则是只能是数字,那么就是说输入非数字就不能匹配。

了解了规则之后,就很简单了,正则提供了默认匹配数字的字符,d或者是[0-9],那么是不是直接/d/.test('123')就行了呢?当然不是,d表示是数字,你还需要加上一个特殊字符,表示匹配所有的数字,因为一个字符串有N个数字,全部都要匹配成功。

这里我使用的是+,加号表示至少匹配一次数字,比如123,如果使用d,就只能一个个匹配出来[1,2,3],这需要在match方法中使用,在test方法中,必须匹配整个字符串是否符合正则。改成d+之后,匹配的是整个字符串中的数字,是不是离我们的最终结果很接近了。

上面的操作似乎已经可以匹配出数字了,但是记住,test()方法中,如果你要验证整个字符串只能是数字,必须加上正则的开始符号^和结束符号$,表示的是从字符串'123'开头匹配到结尾都必须满足数字,如果中间插入其他字符'1kk2什么3',就匹配失败。所以最终的正则写法是 /^\d+$/,或者是/^d+$/g,这里的g可加可不加。

var user = '123' //可以把123改成任意字符来测试。
if (/^\d+$/g.test(user)) {} //写法1 if(true){}
if (/^[0-9]+$/g.test(user)) {} //写法2 if(true){}

场景2:账号只能是字母

数字匹配完了,换成字母会不会呢?只要把d或[0-9]改成字母的正则就行了。字母包含大小写,所以使用[a-zA-Z]。如果去掉^和$,那么仅仅是匹配user字符串中是否包含字母,使用indexOf()或者includes()代替。

var user = 'hyy' //可以把hyy改成任意字符来测试。
if (/^[a-zA-Z]+$/g.test(user)) {} //if(true){}

场景3:账号只能是字母开头,并且字母和数字的组合,长度范围是6-10。

单打了2轮,不够爽,来一套组合拳。上面学习了 ^ $ [0-9] [a-zA-Z] + 这几个正则符号的使用,一定要记下来,很常用的。这组合拳似乎有点复杂,不过不怕,遇到这种问题,我们第一步还是提取规则:
字母开头;
字母和数字组合;
长度6-10。

1、你脑子里要想着 /^what❓$/.test(user) 的结构。

2、字母开头,那么就是第一个字符必须是字母。你需要学习一个新的正则,大括号{n,m},x{1}表示匹配前面的字符1次,x{2}表示匹配2次符合x的字符,还可以写成x{1,3},表示匹配符合x正则的符合最少1次,最多3次。说这段话你一下子理解不了,就跳过。我们只看{1}这种情况。所以,现在加上字母开头这条规则之后,正则变成了 /^[a-zA-Z]{1}}/,注意,我暂时没有写结束符号,最后再加上。

/^[a-zA-Z]{1}}/

3、字母和数字组合,我们是不是要写成[a-zA-Z]d呢?其实还有一个更好的办法,你又学到了一个新的正则w,w和([a-zA-Z]|d)相同,都表示字母和数字的组合。顺便再讲讲 () 和 | 这2个正则的含义。在正则中,()表示一个group,也就是组,|表示或,所以([a-zA-Z]|d)的含义就是字母或者数字,再使用()括起来,形成了一个正则组。觉得括号复杂的话,使用w就行了。

/^[a-zA-Z]{1}\w/

4、终于快搞定了,最后一条规则,长度6-10,如果你不想使用正则,那么长度也可以根据字符串的length来判断,这样的话,上面的正则可以加上结束符号$直接使用了。\w后面我悄悄加了个+,因为要匹配后面的所有字母和数字至少一次,然后再写$结束:

if(/^[a-zA-Z]{1}\w+$/g.test('Hyy123') && 'Hyy123'.length > 5 && 'Hyy123'.length < 11){}

但是既然学习正则,那就用正则的方式去解决,其实更加简单。
利用上面学习的大括号{},我们可以很容易实现长度控制。直接给你看最终形态:

if(/^[a-zA-Z]{1}\w{5,9}$/g.test('Hyy123')){} //true

这个最终形态的正则可以拆分成几部分来看:

^:开头
[a-zA-Z]{1}:第一个字符匹配一次,且只能是字母
\w{5,9}:后面的字符是字母或者数字的组合,且长度是6-10,因为第一个字符占了一个长度,所以这里匹配的是5-9的长度
$:结束

场景4:密码只能是6位数字。

这个就简单多了。规则首先是数字,然后长度是6。最后的g可要可不要。

/^\d{6}$/

match()

test()通常用来验证字符串是否符合某个规则,而match()是从字符串里面提取符合某规则的字符。对前端来说,match使用的场景不多,但是像微信端app的对话系统的表情包,就使用到了一个特定的规则。

你在给一个朋友发微信的时候,一般是直接点击某个表情,然后发送,但是其实还可以输入一些字符组合,然后发送后,在聊天界面,微信系统会自动匹配出来某个表情。这里我猜测就是用match做的字符串处理,又或许有什么我不知道的高深技术吧。

我用一个组合拳的例子介绍一下match的使用场景:

1、有这样一段文字:

我是一个前端,工作1年了,现在失业,想进入腾讯工作,这是我的联系方式:15527578846

2、假设你来应聘前端工程师,我是面试官,我给你提这么几个需求,从这段话中,提取联系方式,工作年限,你该怎么办?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


jquery.validate使用攻略(表单校验) 目录 jquery.validate使用攻略1 第一章&#160;jquery.validate使用攻略1 第二章&#160;jQuery.validate.js API7 Custom selectors7 Utilities8 Validato
/\s+/g和/\s/g的区别 正则表达式/\s+/g和/\s/g,目的均是找出目标字符串中的所有空白字符,但两者到底有什么区别呢? 我们先来看下面一个例子: let name = &#39;ye wen jun&#39;;let ans = name.replace(/\s/g, &#39;&#3
自整理几个jquery.Validate验证正则: 1. 只能输入数字和字母 /^[0-9a-zA-Z]*$/g jQuery.validator.addMethod(&quot;letters&quot;, function (value, element) { return this.optio
this.optional(element)的用法 this.optional(element)是jquery.validator.js表单验证框架中的一个函数,用于表单控件的值不为空时才触发验证。 简单来说,就是当表单控件值为空的时候不会进行表单校验,此函数会返回true,表示校验通过,当表单控件
jQuery.validate 表单动态验证 实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码 )。 也可
自定义验证之这能输入数字(包括小数 负数 ) &lt;script type=&quot;text/javascript&quot;&gt; function onlyNumber(obj){ //得到第一个字符是否为负号 var t = obj.value.charAt(0); //先把非数字的都
// 引入了外部的验证规则 import { validateAccountNumber } from &quot;@/utils/validate&quot;; validator.js /*是否合法IP地址*/ export function validateIP(rule, value,cal
VUE开发--表单验证(六十三) 一、常用验证方式 vue 中表单字段验证的写法和方式有多种,常用的验证方式有3种: data 中验证 表单内容: &lt;!-- 表单 --&gt; &lt;el-form ref=&quot;rulesForm&quot; :rules=&quot;formRul
正则表达式 座机的: 例子: 座机有效写法: 0316-8418331 (010)-67433539 (010)67433539 010-67433539 (0316)-8418331 (0316)8418331 正则表达式写法 0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d
var reg = /^0\.[1-9]{0,2}$/;var linka = 0.1;console.log (reg.test (linka)); 0到1两位小数正则 ^(0\.(0[1-9]|[1-9]{1,2}|[1-9]0)$)|^1$ 不含0、0.0、0.00 // 验证是否是[1-10
input最大长度限制问题 &lt;input type=&quot;text&quot; maxlength=&quot;5&quot; /&gt; //可以 &lt;input type=&quot;number&quot; maxlength=&quot;5&quot; /&gt; //没有效
js输入验证是否为空、是否为null、是否都是空格 目录 1.截头去尾 trim 2.截头去尾 会去掉开始和结束的空格,类似于trim 3.会去掉所有的空格,包括开始,结束,中间 1.截头去尾 trim str=str.trim(); // 强烈推荐 最常用、最实用 or $.trim(str);
正则表达式语法大全 字符串.match(正则):返回符合的字符串,若不满足返回null 字符串.search(正则):返回搜索到的位置,若非一个字符,则返回第一个字母的下标,若不匹配则返回-1 字符串.replace(正则,新的字符串):找到符合正则的内容并替换 正则.test(字符串):在字符串中
正整数正则表达式正数的正则表达式(包括0,小数保留两位): ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+\d)|0)$正数的正则表达式(不包括0,小数保留两位): ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+
JS 正则验证 test() /*用途:检查输入手机号码是否正确输入:s:字符串返回:如果通过验证返回true,否则返回false /function checkMobile(s){var regu =/[1][3][0-9]{9}$/;var re = new RegExp(regu);if (r
请输入保留两位小数的销售价的正则: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ 1.只能输入英文 &lt;input type=&quot;text&quot; onkeyup=&quot;value
判断价格的正则表达式 价格的正则表达式 /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; 1 解析:价格符合两种格式 ^ [1-9]\d*(.\d{1,2})?$ : 1-9 开头,后跟是 0-9,可以跟小数点,但小数点后要带上 1-2 位小数,类似 2,2
文章浏览阅读106次。这篇文章主要介绍了最实用的正则表达式整理,比如校验邮箱的正则,号码相关,数字相关等等,本文给大家列举的比较多,需要的朋友可以参考下。_/^(?:[1-9]d*)$/ 手机号
文章浏览阅读1.2k次。4、匹配中的==、an==、== an9、i9 == "9i"和99p==请注意下面这部分的作用,它在匹配中间内容的时候排除了说明:当html字符串如下时,可以匹配到两处,表示匹配的字符串不包含and且不包含空白字符。说明:在上面的正则表达式中,_gvim正则表达式匹配不包含某个字符串
文章浏览阅读897次。【代码】正则表达式匹配a标签的href。_auto.js 正则匹配herf