网站首页seo关键词布局,福建省网络公司排名,做网站需要网页嵌套吗,备案网站资料上传教程文章目录 一、是什么二、匹配规则正则表达式标记贪婪模式懒惰模式分组 三、匹配方法str.match(regexp)str.matchAll(regexp)str.search(regexp)str.replace(regexp)str.split(regexp)regexp.exec(str)regexp.test(str) 四、应用场景参考文献 一、是什么
正则表达式是一种用来匹… 文章目录 一、是什么二、匹配规则正则表达式标记贪婪模式懒惰模式分组 三、匹配方法str.match(regexp)str.matchAll(regexp)str.search(regexp)str.replace(regexp)str.split(regexp)regexp.exec(str)regexp.test(str) 四、应用场景参考文献 一、是什么
正则表达式是一种用来匹配字符串的强有力的武器
它的设计思想是用一种描述性的语言定义一个规则凡是符合规则的字符串我们就认为它“匹配”了否则该字符串就是不合法的
在 JavaScript 中正则表达式也是对象构建正则表达式有两种方式
字面量创建其由包含在斜杠之间的模式组成
const re /\d/g;调用RegExp对象的构造函数
const re new RegExp(\\d,g);const rul \\d
const re1 new RegExp(rul,g);使用构建函数创建第一个参数可以是一个变量遇到特殊字符\需要使用\进行转义 二、匹配规则
常见的校验规则如下
规则描述\转义^匹配输入的开始$匹配输入的结束*匹配前一个表达式 0 次或多次匹配前面一个表达式 1 次或者多次。等价于 {1,}?匹配前面一个表达式 0 次或者 1 次。等价于{0,1}.默认匹配除换行符之外的任何单个字符x(?y)匹配’x’仅仅当’x’后面跟着’y’。这种叫做先行断言(?y)x匹配’x’仅当’x’前面是’y’.这种叫做后行断言x(?!y)仅仅当’x’后面不跟着’y’时匹配’x’这被称为正向否定查找(?!y)x仅仅当’x’前面不是’y’时匹配’x’这被称为反向否定查找xIy匹配‘x’或者‘y’{n}n 是一个正整数匹配了前面一个字符刚好出现了 n 次{n,}n是一个正整数匹配前一个字符至少出现了n次{n,m}n 和 m 都是整数。匹配前面的字符至少n次最多m次[xyz]一个字符集合。匹配方括号中的任意字符[^xyz]匹配任何没有包含在方括号中的字符\b匹配一个词的边界例如在字母和空格之间\B匹配一个非单词边界\d匹配一个数字\D匹配一个非数字字符\f匹配一个换页符\n匹配一个换行符\r匹配一个回车符\s匹配一个空白字符包括空格、制表符、换页符和换行符\S匹配一个非空白字符\w匹配一个单字字符字母、数字或者下划线\W匹配一个非单字字符
正则表达式标记
标志描述g全局搜索。i不区分大小写搜索。m多行搜索。s允许 . 匹配换行符。u使用unicode码的模式进行匹配。y执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。
使用方法如下
var re /pattern/flags;
var re new RegExp(pattern, flags);在了解下正则表达式基本的之外还可以掌握几个正则表达式的特性
贪婪模式
在了解贪婪模式前首先举个例子
const reg /ab{1,3}c/在匹配过程中尝试可能的顺序是从多往少的方向去尝试。首先会尝试bbb然后再看整个正则是否能匹配。不能匹配时吐出一个b即在bb的基础上再继续尝试以此重复
如果多个贪婪量词挨着则深度优先搜索
const string 12345;
const regx /(\d{1,3})(\d{1,3})/;
console.log( string.match(reg) );
// [12345, 123, 45, index: 0, input: 12345]其中前面的\d{1,3}匹配的是123后面的\d{1,3}匹配的是45
懒惰模式
惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配
var string 12345;
var regex /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// [1234, 1, 234, index: 0, input: 12345]其中\d{1,3}?只匹配到一个字符1而后面的\d{1,3}匹配了234
分组
分组主要是用过()进行实现比如beyond{3}是匹配d字母3次。而(beyond){3}是匹配beyond三次
在()内使用|达到或的效果如(abc | xxx)可以匹配abc或者xxx
反向引用巧用$分组捕获
let str John Smith;// 交换名字和姓氏
console.log(str.replace(/(john) (smith)/i, $2, $1)) // Smith, John三、匹配方法
正则表达式常被用于某些方法我们可以分成两类
字符串str方法match、matchAll、search、replace、split正则对象下regexp的方法test、exec
方法描述exec一个在字符串中执行查找匹配的RegExp方法它返回一个数组未匹配到则返回 null。test一个在字符串中测试是否匹配的RegExp方法它返回 true 或 false。match一个在字符串中执行查找匹配的String方法它返回一个数组在未匹配到时会返回 null。matchAll一个在字符串中执行查找所有匹配的String方法它返回一个迭代器iterator。search一个在字符串中测试匹配的String方法它返回匹配到的位置索引或者在失败时返回-1。replace一个在字符串中执行查找匹配的String方法并且使用替换字符串替换掉匹配到的子字符串。split一个使用正则表达式或者一个固定字符串分隔一个字符串并将分隔后的子字符串存储到数组中的 String 方法。
str.match(regexp)
str.match(regexp) 方法在字符串 str 中找到匹配 regexp 的字符
如果 regexp 不带有 g 标记则它以数组的形式返回第一个匹配项其中包含分组和属性 index匹配项的位置、input输入字符串等于 str
let str I love JavaScript;let result str.match(/Java(Script)/);console.log( result[0] ); // JavaScript完全匹配
console.log( result[1] ); // Script第一个分组
console.log( result.length ); // 2// 其他信息
console.log( result.index ); // 7匹配位置
console.log( result.input ); // I love JavaScript源字符串如果 regexp 带有 g 标记则它将所有匹配项的数组作为字符串返回而不包含分组和其他详细信息
let str I love JavaScript;let result str.match(/Java(Script)/g);console.log( result[0] ); // JavaScript
console.log( result.length ); // 1如果没有匹配项则无论是否带有标记 g 都将返回 null
let str I love JavaScript;let result str.match(/HTML/);console.log(result); // nullstr.matchAll(regexp)
返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
const regexp /t(e)(st(\d?))/g;
const str test1test2;const array [...str.matchAll(regexp)];console.log(array[0]);
// expected output: Array [test1, e, st1, 1]console.log(array[1]);
// expected output: Array [test2, e, st2, 2]str.search(regexp)
返回第一个匹配项的位置如果未找到则返回-1
let str A drop of ink may make a million think;console.log( str.search( /ink/i ) ); // 10第一个匹配位置这里需要注意的是search 仅查找第一个匹配项
str.replace(regexp)
替换与正则表达式匹配的子串并返回替换后的字符串。在不设置全局匹配g的时候只替换第一个匹配成功的字符串片段
const reg1/javascript/i;
const reg2/javascript/ig;
console.log(hello Javascript Javascript Javascript.replace(reg1,js));
//hello js Javascript Javascript
console.log(hello Javascript Javascript Javascript.replace(reg2,js));
//hello js js jsstr.split(regexp)
使用正则表达式或子字符串作为分隔符来分割字符串
console.log(12, 34, 56.split(/,\s*/)) // 数组 [12, 34, 56]regexp.exec(str)
regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配项与以前的方法不同它是在正则表达式而不是字符串上调用的
根据正则表达式是否带有标志 g它的行为有所不同
如果没有 g那么 regexp.exec(str) 返回的第一个匹配与 str.match(regexp) 完全相同
如果有标记 g调用 regexp.exec(str) 会返回第一个匹配项并将紧随其后的位置保存在属性 regexp.lastIndex 中。 下一次同样的调用会从位置 regexp.lastIndex 开始搜索返回下一个匹配项并将其后的位置保存在 regexp.lastIndex 中
let str More about JavaScript at https://javascript.info;
let regexp /javascript/ig;let result;while (result regexp.exec(str)) {console.log( Found ${result[0]} at position ${result.index} );// Found JavaScript at position 11// Found javascript at position 33
}regexp.test(str)
查找匹配项然后返回 true/false 表示是否存在
let str I love JavaScript;// 这两个测试相同
console.log( /love/i.test(str) ); // true四、应用场景
通过上面的学习我们对正则表达式有了一定的了解
下面再来看看正则表达式一些案例场景
验证QQ合法性5~15位、全是数字、不以0开头
const reg /^[1-9][0-9]{4,14}$/
const isvalid patrn.exec(s)校验用户账号合法性只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
var patrn/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
const isvalid patrn.exec(s)将url参数解析为对象
const protocol (?protocolhttps?:);
const host (?host(?hostname[^/#?:])(?::(?port\\d))?);
const path (?pathname(?:\\/[^/#?])*\\/?);
const search (?search(?:\\?[^#]*)?);
const hash (?hash(?:#.*)?);
const reg new RegExp(^${protocol}\/\/${host}${path}${search}${hash}$);
function execURL(url){const result reg.exec(url);if(result){result.groups.port result.groups.port || ;return result.groups;}return {protocol:,host:,hostname:,port:,pathname:,search:,hash:,};
}console.log(execURL(https://localhost:8080/?ab#xxxx));
protocol: https:
host: localhost:8080
hostname: localhost
port: 8080
pathname: /
search: ?ab
hash: #xxxx再将上面的search和hash进行解析
function execUrlParams(str){str str.replace(/^[#?]/,);const result {};if(!str){ //如果正则可能配到空字符串极有可能造成死循环判断很重要return result; }const reg /(?:^|)([^]*)?([^]*?)(?|$)/ylet exec reg.exec(str);while(exec){result[exec[1]] exec[2];exec reg.exec(str);}return result;
}
console.log(execUrlParams(#));// {}
console.log(execUrlParams(##));//{#:}
console.log(execUrlParams(?q3606srcsrp)); //{q: 3606, src: srp}
console.log(execUrlParams(testabca));//{test: abc, : , a: }参考文献
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions 希望本文能够对您有所帮助如果您有任何问题或建议请随时在评论区留言联系 章挨踢章IT 谢谢阅读
