玩转正则表达式

正则学了忘忘了学。。。秃头,特此记录

正则表达式

复制代码
var re = /ab+c/;
// 或者调用RegExp对象的构造函数
var re = new RegExp("ab+c");

正则表达式中的特殊字符

复制代码
\d:数字
\D:任何非数字
\w:字母、数字、下划线
\W:任何非单词字符
\s:空格或tab 
\S:任何非空格字符
\b:任何单词边界
.:任意单个字符 
[0-9a-zA-Z\_]:0到9或小写字母或大写字母或下划线 
A|B:A或B(例如(P|p)ython匹配'Python'或'python') 
\:转译字符
\num:引用分组num匹配到的字符串\n:表示第n个被捕获括号匹配的子字符串,而replace则使用$n来匹配括号里的子串例:/(a)(b)\d*\1\2/ : \1和\2分别表示第一个括号和第二个括号中的规则 即: /(a)(b)\d*(a)(b)//(a)(b)\d*\1\2/.test('ab0ab') // true;/(a)(b)\d*\1\2/.test('ab0ee') // false例:'123-李四'.replace(/(\d+)\-(\D+)/,'$2,$1'); // "李四,123"其中$1匹配的是(\d+)的结果,$2匹配的是(\D+)的结果 (?P<name>):分组起别名,(?P=name):引用别名为name分组匹配到的字符串
*:0个或多个 
+:1个或多个 
?:0个或1个 
{n}:正好N个 
{n,}:n至更多
{n, m}:n至m个
|:匹配左右任意一个表达式
(ab):将括号中字符作为一个分组
^:行的开头,^在[]里还可表示反向字符范围:[^a‐z] #匹配不在a‐z的范围的字符例如匹配010­123456的正则为:\d{3}\­\d{3,8} 
^\d表示必须以数字开头 
$:行的结尾,例如,/t$/ 并不会匹配 "eater" 中的 't',但是会匹配 "eat" 中的 't'。
\d$表示必须以数字结尾
匹配手机号:1[358]\d{9} 
匹配图片:"https://.*?\.[jpng]{3}"

详解正则分组(...)和分组引用\n

一个正则表达式模式使用括号,将导致相应的子匹配被记住。例如,/a(b)c /可以匹配字符串"abc",并且记得"b"。回调这些括号中匹配的子串,使用数组元素[1],......[n]。

使用括号匹配的子字符串的数量是无限的。返回的数组中保存所有被发现的子匹配。下面的例子说明了如何使用括号的子字符串匹配。

下面的脚本使用replace()方法来转换字符串中的单词。在匹配到的替换文本中,脚本使用替代的 1,2表示第一个和第二个括号的子字符串匹配。

复制代码
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr); // Smith, John

// 如果遇到非正常的html格式字符串,匹配出错
"<html>hh</htmlbalabala>".match(/<([a-zA-Z]*)>\w*<\/\1>/)
// 结果: null
"<html>hh</html>".match(/<([a-zA-Z]*)>\w*<\/\1>/)
// 结果: ["<html>hh</html>", "html", index: 0, input: "<html>hh</html>", groups: undefined]
/*
注意:这个\1  \2......  都要和正则表达式集合()一起使用
简单的说就是
\1表示重复正则第一个圆括号内匹配到的内容
\2表示重复正则第二个圆括号内匹配到的内容
*/

使用正则表达式的方法

方法 描述
exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回 null)。
test 一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。
match 一个在字符串中执行查找匹配的String方法,它返回一个数组,在未匹配到时会返回 null。
matchAll 一个在字符串中执行查找所有匹配的String方法,它返回一个迭代器(iterator)。
search 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。
复制代码
// search: str.search(reg)
var str="Visit W3School!"
str.search(/W3School/) // 6
str.search(/sdf/) // -1
// split: str.split(reg)
var str="貂蝉love吕布" 
var result = str.split(/[a-z]+/g) // 以规则/[a-z]+/g来分割str
// 等价于var result = str.split(new RegExp("[a-z]+", "g"))
console.log(result) //  ["貂蝉", "吕布"]
// test: reg.test(str)
/\d/.test('Visit W3School!'); // true
// replace: str1.replace(reg, str2)
'Visit W3School!'.replace(/\d/, '替换数字'); // "Visit W替换数字School!"

正则表达式修饰符

|-----|-----------------------------------|
| g | 全局搜索。 |
| i | 不区分大小写搜索。 |
| m | 多行搜索。 |
| s | 允许 . 匹配换行符。 |
| u | 使用unicode码的模式进行匹配。 |
| y | 执行"粘性"搜索,匹配从目标字符串的当前位置开始,可以使用y标志。 |
| x | 忽略正则表达式中的空格 |

复制代码
var re = /pattern/flags;
// 或者
var re = new RegExp("pattern", "flags");

值得注意的是,修饰符是一个正则表达式的一部分,它们在接下来的时间将不能添加或删除。

一些简单匹配

复制代码
// 简单的匹配
var s1 = 'abc‐123456' 
var m1 = /^[a-z]{3}‐\d{3,6}$/ 
s1.match(m1) 
// 结果: ["abc‐123456", index: 0, input: "abc‐123456", groups: undefined]

// | 的用法
"08".match(/[1‐9]?\d$|100/)
// 结果: ["8", index: 1, input: "08", groups: undefined]

// 匹配开头结尾: 
"<html>hh</html>".match(/<[a-zA-Z]*>\w*<\/[a-zA-Z]*>/)
// 结果: ["<html>hh</html>", index: 0, input: "<html>hh</html>", groups: undefined]

// 组的匹配:
'abc‐123456'.match(/^([a-z]{3})‐(\d{3,6})$/) 
// 结果: ["abc‐123456", "abc", "123456", index: 0, input: "abc‐123456", groups: undefined]

// 贪婪匹配: 正则默认使用贪婪匹配,也就是匹配尽可能多的字符:
'12300'.match(/^(\d+)(0*)$/) 
// 结果: ["12300", "12300", "", index: 0, input: "12300", groups: undefined]
//前面的\d+采用贪婪匹配把所有的数字全给匹配了,导致第二组的0*匹配了个空字符串,如果想让后面的0* 也匹配到,可用?使前面的\d+不使用贪婪匹配:
'12300'.match(/^(\d+?)(0*)$/) 
// 结果: ["12300", "123", "00", index: 0, input: "12300", groups: undefined]

// 匹配一个变量
const sendPostKey = '西湖';
const PosKey = '杭州西湖商圈';
const re = new RegExp(sendPostKey, 'gi');
const buleStrHtml = PosKey.replace(re, '<span class="col2a86e8">' + sendPostKey  + '</span>');
console.log(buleStrHtml); //杭州<span class="col2a86e8">西湖</span>商圈"

正则表达式执行后的返回信息

复制代码
var myRe = /d(b+)d/g; // var myRe  = new RegExp("d(b+)d", "g")
var myArray = myRe.exec("cdbbdbsbz");console.log(myArray) // ["dbbd", "bb", index: 1, input: "cdbbdbsbz", groups: undefined]
console.log(myRe.lastIndex) // 5
console.log(myRe.source) // "d(b+)d"
对象 属性或索引 描述 在例子中对应的值
myArray 匹配到的字符串和所有被记住的子字符串(即每一个括号中的匹配到的)。 ["dbbd", "bb"]
myArray index 在输入的字符串中匹配到的以0开始的索引值。 1
myArray input 初始字符串。 "cdbbdbsbz"
myArray [0] 匹配到的所有字符串(并不是匹配后记住的字符串)。注:原文"The last matched characters.",应该是原版错误。匹配到的最终字符。 "dbbd"
myRe lastIndex 下一个匹配的索引值(必须以变量保存的形式才有值,像/d(b+)d/g.lastIndex的话结果就是0)。注意:这个属性只有在使用g参数时可用 5
myRe source 模式文本。在正则表达式创建时更新,不执行。 "d(b+)d"

常用的正则

复制代码
// 电话
export const PhoneReg = /^(1[1-9])[0-9]{9}$/;
// email
export const EMailReg =/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i;
// 整数
export const IntegerReg = /^[\-\+]?\d+$/;
// 数字
export const NumberReg =/^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/;
// 日期
export const DateReg =/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/;
// 英文
export const onlyLetterSp = /^[a-zA-Z\ \']+$/;
// 只能填写数字与英文字母
export const onlyLetterNumber = /^[0-9a-zA-Z]+$/;
// 只能填写中文汉字
export const Chinese = /^[\u4E00-\u9FA5]+$/;
// 拼音或英文字母,格式需为 XX/ZZ
export const EnglishName = /^[a-zA-Z]+(\/[a-zA-Z\.\s]+)+$/;
// 身份证
export const chinaId =/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
// 只能输入15位或18位数字
export const integerletter15or18 = /^(\w{15}|\w{18})$/;
// 最多20位整数,最多保留两位小数
export const int20float2 = /^\d{0,20}(\.[0-9]{0,2})?$/;
相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)3 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法