正则表达式

用来匹配符合某种规则的字符串

案例

  • 检索字符串中符合某种规则多个子字符串
  • 判断用户的输入是否符合某种规则
  • 替换字符串中符合某种规则的文本
  • 用户输入的是不是合法的手机号
  • 用户输入的是不是合法的邮箱
  • 用户输入的是不是合法的用户名

创建方式

字面量的方式创建——//

[] {} //这些都属于字面量

构造函数的方式创建

如果正则表达式将会改变,或者它将会从用户输入等来源中动态地产生,就需要使用构造函数来创建正则表达式。

转义

遇到特殊的字符或者能组成特殊字符的,进行转义操作;其他情况相当于不存在
如果将RegExp构造函数与字符串文字一起使用,请记住反斜杠是字符串文字中的转义,因此要在正则表达式中使用它,您需要在字符串文字级别转义它。 /a*b/ 和new RegExp("a\b")创建的表达式是相同的,搜索“a”后跟文字“”后跟“b”。

new RegExp('+86\d{11}','g')
前面代表字符串,后面代表匹配的模式

修饰符

  • g——global全文搜索,不添加的话,搜索到第一个就停止
  • i——ignore case忽略大小写,默认大小写敏感
  • m——multiple lines多行搜索

正则的方法

  • reg.test(str)
var reg = /\+86\d{11}/
reg.test("+861302030304005030403")
reg.test("+8613020303040")
reg.test("+8613020303040a")

false
true
false

  • reg.exec(str)

字符串的方法参数可以是正则表达式

  • str.search(reg)
  • str.match(reg)
  • str.replace(reg)
  • str.replace(/str(reg)/g, 'str$1')
  • str.replace(reg, function(matched, $1, index) { })
  • str.split(reg)
let str = 'hello1 Ryan, hello2 world' 
str.search(/hello\d/) 
str.match(/hello\d/g)
str.replace(/hello\d/g, 'hi')
str.split(/\s/)
str.split(/\d/)

0
["hello1", "hello2"]
"hi Ryan, hi world"
["hello1", "Ryan,", "hello2", "world"]
["hello", " Ryan, hello", " world"]

上述字符串方法,没有改变原字符串

专用字符

匹配有特殊意义的字符,需要转义\
( ) [ ] { } \ ^ $ | ? * + .

范围匹配

[]代表匹配一个字符
[abcd]匹配一个字符,是a b c d中的任意一个
[0-9]匹配一个是0到9的数字
[a-zA-Z]匹配一个不限制大小写的字母
[^abc]匹配不是a b c的字符

let reg = /不要[89][89][67]/ 
reg.test('我们不要996') 
reg.test('我们要965')

true
false

合法变量名????中文?
/[_$a-zA-Z][_$a-zA-Z]*/

预定义匹配——固定的匹配

  • .等价于 [^\r\n],匹配一个除回车和换行以为的任意字符
  • \d等价于[0-9],匹配一个数字字符
  • \D等价于[^0-9], 匹配一个非数字字符
  • \s等价于[\t\n\r\v\f],匹配一个空白字符
  • \S等价于[^\t\n\r\v\f],匹配一个非空白字符
  • \w等价于[a-zA-Z_0-9],匹配一个字母、数字、下划线
  • \W等价于[^a-zA-Z_0-9],匹配一个非单词字符

量词——匹配字符串的相加操作

  • ?前面的字符出现0次或者1次
  • +前面的字符出现1次或者多次
  • *前面的字符出现0次或者多次
  • {n}前面的字符出现n次,无空格
  • {n,m}前面的字符出现n到m次,无空格
  • {n,}前面的字符出现至少n次,无空格

边界

  • /^xyz/以xyz开头
  • /abc$/以abc结尾
  • /\babc\b/匹配是单词的abc(左右两侧是字符串开头、 结尾、中横线、空格)
  • /\Babc\B/匹配不是单词的abc

获取一篇文章单词的数量????

var str2 = 'hello1 whello9orld hello2 12-hello8-3456 jirengu ruoyu hello3'
str2.match(/\b\w+\d\b/g)

12-hello8-3456是一个单词,但是被分开

不要自以为是,因为自己有限的认知,让用户无法使用

匹配手机号

/^1\d{10}$/
/^(\+86)?1\d{10}$/
是为了防止用户误操作,不是越严格越好

匹配邮箱

规则:字符串中间包含一个@,@后面包含个.
只需要简单的限制,目的是防止用户误操作,收不到邮箱是他的事,不能隔离有用的邮箱
let reg = /^[^@\s]+@[^@\s]+\.[^@\s]+$/

匹配用户名

规则:合法用户名至少8位至多15位,包含大写、小写、 数字、下划线至少两种
规则太难,可以把不符合条件的返回错误,符合条件的留下来

function validUsername(rawInput) {
  if (!/^\w{8,15}$/.test(rawInput)) return false
  if (/(^[a-z]+$)|(^[A-Z]+$)|(^[0-9]+$)|(^\d+$)|(^_+$)/.test(rawInput)) return false
}

写正则表达式不是目的,解决问题,让别人明白才是重点

贪婪模式和非贪婪模式

'123456789'.match(/\d{3,5}/g)的结果是什么?

["12345", "6789"]

默认是贪婪模式,即可能多的匹配

非贪婪模式

量词后加?,尽可能少的匹配
'123456789'.match(/\d{3,5}?/g)
``aa"hello world" ok "Ryan".match(/".+?"/g)

分组

把一些字符用()当做一个整体;使用$n代表第n分组匹配的内容
/hunger{3}/ 匹配'hungerrr'
/(hunger){3}/匹配'hungerhungerhunger'
(hello)|(hi) wolrd/匹配'hello world''hi world'

`"hello8 world, hello6 Ryan".replace(/hello(\d)/g, 'hi$1')`

'hi8 world, hi6 Ryan'

'<div>this is a div</div>'.replace(/(<\/?)div(>)/g,'$1span$1')

"<span<this is a div</span</"

'<div>this is a div</div>'.replace(/(<\/?)div(>)/g,'$1span$2')

"<span>this is a div</span>"

'<div>this is a div</div>'.replace(/<div>/,'<span>').replace(/<\/div>/,'</span>')

"<span>this is a div</span>"

前瞻

exp1(?=exp2)后面是exp2的exp1
exp1(!=exp2)后面不是exp2的exp1

RegExp.prototype.exec

调用全局的RegExp对象的exec()时,它会在RegExp实例的 lastIndex属性指定的字符处开始检索字符串string

当exec()找到了与表达式相匹配的文本时,在匹配后,它将把RegExp实例的lastIndex属性设置 为匹配文本的最后一个字符的下一个位置。可以通过反复调用exec()方法来遍历字符串中的所有匹配文本

当 exec() 再也找不到匹配的文本时,它将返回null,并把lastIndex属性重置为0

let reg = /\b\w+\b/g, temp 
while(temp = reg.exec('hello world, hi jirengu')) { 
console.log(`${temp.index} : ${temp[0]}`) 
} 
/*输出 0 : hello 6 : world 13 : hello 19 : jirengu */

String.prototype.replace(reg, function)

第二个参数传入一个function,会在每次匹配替换的时候调用, 返回值为要替换的内容,回调函数一共有3/4个参数

  • 第一个参数很简单,是匹配字符串
  • 第二个参数是正则表达式分组内容,若没有分组则没有该参数
  • 第三个参数是匹配项在字符串中的index,若没有分组该为第二个参数
  • 第四个参数则是原字符串,若没有分组该为第三个参数

把字符串转换成驼峰形式

let str = 'border-top-color' 
const strToCamel = str => str.replace(/-(\w)/g, (match, $1) => $1.toUpperCase()) 
console.log( strToCamel(str) )

参考

https://deerchao.cn/tutorials/regex/regex.htm

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,699评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,124评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,127评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,342评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,356评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,057评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,654评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,572评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,095评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,205评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,343评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,015评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,704评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,196评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,320评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,690评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,348评论 2 358

推荐阅读更多精彩内容

  • 正则表达式 正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描...
    yshenhn阅读 363评论 0 0
  • 正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系...
    草鞋弟阅读 755评论 0 0
  • 基本语法 regular expression是计算机科学中的一个概念。正则表达式使用单个字符串来描述匹配一系列符...
    DeeJay_Y阅读 423评论 0 0
  • 常见符号表示的含义: \d 表示匹配 0~9之间的任一数字,相当于[0,9]。 \D 表示非数字字符 \w 表示任...
    别让我一个人醉_1fa7阅读 163评论 0 0
  • 正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系...
    真的吗_a951阅读 322评论 0 0