1. 90前端首页
  2. 前端开发
  3. JavaScript

JS正则基本语法

正则表达式形式

let expression = / pattern / flags ;

*+?

这三个符号,表示一个或一序列字符重复出现的次数。
它们分别表示“没有或更多”“一次或更多” 还有 “没有或一次”

\"ab*\":表示一个字符串有一个a后面跟着零个或若干个b。(\"a\",  \"ab\", \"abbb\",abbbb...);

\"ab+\":表示一个字符串有一个a后面跟着至少一个b或者更多;(\"ab\", \"abbb\",abbbb...);

\"ab?\":表示一个字符串有一个a后面跟着零个或者一个b;(\"a\",  \"ab\");

\"a?b+$\":表示在字符串的末尾有零个或一个a跟着一个或多个b。

gim

每个正则表达式都可带有一或多个标志(flags),用以标明正则表达式的行为。

g: 表示全局(global)模式,即模式将被应用于所有字符串。

i : 表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;

m:表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

^$

作用是分别指出一个字符串的开始和结束。^ 还有另个一个作用就是取反,比如[^xyz] 表示匹配的字符串不包含xyz。

\"^The\":表示所有以\"The\"开始的字符串(\"There\",\"The cat\"等);
\"for you$\":表示所有以\"for you\"结尾的字符串;
\"^abc$\":表示开始和结尾都是\"abc\"的字符串。

()[]{}

() 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如 (\\s+) 表示连续空格的字符串。

[] 是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和数字。

{} 一般用来表示匹配的长度,比如 \\d{7} 表示匹配四个数字,\\d{1,7} 表示匹配1~7个数字,\\d{7,} 表示匹配7个以上数字。

\\d\\s\\w.

\\d 匹配一个非负整数, 等价于 [0-9]

\\s 匹配一个空白字符

\\w 匹配一个英文字母或数字,等价于[0-9a-zA-Z]

.  匹配除换行符以外的任意字符,等价于[^\\n]

区别于*: 匹配前面的子表达式零次或多次(需要前面有子表达式)

常用匹配

[\\b] 匹配一个退格符  
\\b 匹配一个单词的边界  
\\B 匹配一个单词的非边界  
\\cX 这儿,X是一个控制符,/\\cM/匹配Ctrl-M  
\\d 匹配一个字数字符,/\\d/ = /[0-9]/  
\\D 匹配一个非字数字符,/\\D/ = /[^0-9]/  
\\n 匹配一个换行符  
\\r 匹配一个回车符  
\\s 匹配一个空白字符,包括\\n,\\r,\\f,\\t,\\v等  
\\S 匹配一个非空白字符,等于[^\\n\\f\\r\\t\\v]  
\\t 匹配一个制表符  
\\v 匹配一个重直制表符  
\\w 匹配一个可以组成单词的字符,包括数字、下划线,如[\\w]匹配\"$7.35\"中的7,等于[a-zA-Z0-9]  
\\W 匹配一个不可以组成单词的字符,如[\\W]匹配\"$7.35\"中的$,等于[^a-zA-Z0-9]。

需要转译的字符

()[]{}^$.*+?|

经典示例

1.提取浏览器 url 中的参数名和参数值,生成一个key/value 的对象。

function getUrlParamObj(){
    let obj = {};
    //获取url的参数部分,如name=xiaoming&age=18
    let params = window.location.search.substr(1);
    //[^&=]+ 表示不含&或=的连续字符,加上()就是提取对应字符串
    params.replace(/([^&=]+)=([^&=]*)/gi, function($1, $2){
        obj[$1] =  decodeURIComponent($2);
    });
 
    return obj;
}

2.将手机号 18380277999 转化成 183****7999 。

function telFormat(tel){
 
    tel = String(tel);
 
    // 方法一
    return tel.replace(/(\\d{3})(\\d{4})(\\d{4})/, function ($1, $2, $3) {
       return $1 +\'****\' + $3;
    });
 
    // 方法二
    return tel.replace(/(\\d{3})(\\d{4})(\\d{4})/,\'$1****$3\');
}

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021623451

展开阅读全文

发表评论

登录后才能评论