JS-正则表达式

Posted 2020-11-03 jkcaptain

前言

正则表达式这东西，工作中其实经常用到，简单的比如验证邮箱、手机号，验证中文，去除首尾空格，复杂的例子有 老款jquery的css选择器引擎 sizzle.js。

对正则一直是一知半解，只会用最基本的，而且还用的懵懵懂懂。感觉精通正则的人跟精通linux shell命令行的人一样，是牛叉哄哄的，哈哈。

我们对正则的运用经常是用于检测字符串是否符合某个格式， 或者匹配出我们需要的某些属性，比如 className, transform的值等等。

以下是对正则的一些归纳，希望对看官有所帮助。

一、正则常用的语法

①方括号，用于查找某个范围内的字符。

注意：方括号中的 ^ 和 量词中的 ^ 意义不同。方括号中的 ^ 类似编程语言中逻辑非的意思， 量词中的 ^n 表示匹配开头为 n 的字符串

[0-9]     //查找从0到9的数字
[A-z]     //查找从 大A 到 小 z 之间的字符
[abc]    //查找方括号之间的任意字符。
[^abc]  //查找任何不在方括号之间的字符。

②元字符 ，表示有特殊含义的字符

常用的几个：

\\w — 查找单词字符， 助记法：word 的 简写

\\d — 查找数字字符， 助记法：digit 的简写

\\s — 查找空白字符， 助记法：space 的简写

\\b — 匹配单词边界，助记法： border 的简写

常用的就这 4 个吧， 我们玩 CF 的时候，移动是要 WASD，除了A其他的都用到了 。玩LOL的时候，按B是回城。适当的时候还可以用游戏联想下，嘿嘿。

以上4个元字符，为大写模式时，意义与小写模式相反。 例如： \\W 是查找非单词字符, \\D 是查找非数字字符。

③量词，用于匹配对应的数量。

量词的运用，就是在字符的前后添加符号，指定数量。

注意：？=， ？!  运用时，需要写在括号中，例如： /1(?=23)/.test(‘123‘),   /1(?!3)/.test(‘123‘)

// 用于数量匹配

//跟在字符后的量词
+     // 匹配包含 1个或多个， 可理解为 1+ (0 - N)
*      // 匹配包含 0个或多个， 可理解为 1 * (0 -N)
?      // 匹配包含 0个或 1个， 可理解为 是否包含

{X}           // 匹配包含 X 个
{X, Y}       // 匹配包含 至少 X 个，最多 Y 个
{X,}         // 匹配包含至少 X 个

//用于匹配开头或结尾的量词
^n   // 匹配开头为 n
n$   // 匹配结尾为 n

//用于匹配字符后是否跟随某个字符串，
?=n  匹配任何其后跟随 n 的字符串
?!n   匹配任何其后不跟随 n 的字符串

二、运用。

① RegExp对象的方法， 有三个：complie， test，exec

compile 方法， 常用与代码执行过程中 改变或重新编译 正则表达式，没感觉到有什么用。

test 方法， 用于判断字符串是否符合 正则表达式的规则， 返回 true 或 false。

var reg = /man/g;
var str = ‘woman‘;

reg.test(str);

exec 方法， 用于检索字符串中，正则表达式的匹配。如果匹配成功，返回值是一个数组，其中存放匹配的结果。如果未找到对应的匹配，则返回 null。

exec()接受一个参数，即 要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回 null。

返回的数组虽然是 Array 的实例，但包含两个额外的属性： index 和 input。

index 表示匹配项在字符串中的位置，而 input 表示应用正则表达式的字符串。

如果是全局匹配，可以通过while循环 找到每次匹配到的字符串，以及子项。每次匹配都接着上次的位置开始匹配

var text = "cat, bat, sat, fat";
var pattern2 = /.at/g;

var matches = pattern2.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern2.lastIndex); //3

matches = pattern2.exec(text);
alert(matches.index); //5
alert(matches[0]); //bat
alert(pattern2.lastIndex); //8

 

② 支持正则表达式的 String 对象的方法： search，split， replace， match

search 方法， 用于检索字符串中指定的子字符串。 如果匹配成功，则返回第一个 与 regexp 匹配的子字符串的起始位置，否则返回 -1 。类似 String.prototype.indexOf 方法。感觉 indexOf 更好。

split 方法，将字符串分割为数组。不作描述。

replace 方法， 替换字符串中的内容。有两个参数，第一个可以是正则表达式，或者字符串，第二个参数可以是替换文本，或者生成替换文本的函数。

当第二个参数为函数时，这个函数也是有参数的。函数的第一个参数，默认为 模式的匹配项，也就是正则表达式匹配到的值。

注意： replace方法的第二个参数中， $ 字符具有特定的含义。具体可查看 W3C

//交换字符串中的两个单词
var str = ‘hello,world‘;
str.replace(/(\\w+)\\S(\\w+)/, ‘$2 $1‘) //world hello;

//使用函数修改匹配到的字符, 如 DOM中的 borderTop 修改为 css中的 border-top
function upperToHypenLower(match){
    return ‘-‘ + match.toLowerCase();
}
function styleHypenFormat(propertyName){
　　return propertyName.replace(/[A-Z]/g, upperToHypenLower);
}
var style = styleHypenFormat(‘borderTop‘); // ‘border-top‘

match 方法， match() 方法返回一个数组或null。

如果正则表达式不是全局匹配，返回的数组上有几个静态属性，index，input，groups，此时str.match(reg) 和 reg.exec(str)的返回值是一样的。

 

贴一些常用的正则表达式

匹配中文：[\\u4e00-\\u9fa5] //中文ACALL码的范围
行首行尾空格：^\\s*|\\s*$ //去除首尾空格， trim() 的 polyfill。

手机号：/^1\\d{10}$/
Email：^\\[email protected][a-z0-9]+(\\.[a-z]+){1,3}$  
//起始至少为一个字符(\\w字母，数字或者下划线)，然后匹配@,接着为任意个字母或者数字，\\.代表真正的点，.后面为至少一个的字符（a-z）,同时这个(比如.com)整体为一个子项作为结束，可以出现1-3次。
因为有的邮箱是这样的.cn.net。（[email protected] [email protected] [email protected] ）

网址：[a-zA-z]+://[^\\s]*   http://......
  //匹配不分大小写的任意字母，接着是//,后面是非空格的任意字符

邮政编码：[1-9]\\d{5}  //起始数字不能为0，然后是5个数字
身份证：[1-9]\\d{14}|[1-9]\\d{17}|[1-9]\\d{16}x

 

参考

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

https://www.cnblogs.com/moqing/archive/2016/07/13/5665126.html