资讯专栏INFORMATION COLUMN

JavaScript || 正则表达式

edgardeng / 2021人阅读

摘要:方法的参数正则表达式是变量,必须使用方式创建方法的第二个参数可以是回调函数,其参数是每次匹配成功获取的字符串。

1 为什么要用正则表达式?

学习之前,多想想为什么要使用正则表达式,有助于理解。

正则表达式regular expression使用单个字符串来描述某个句法规则,计算机根据规则去匹配字符串中的内容。

正则表达式的性能高于常规字符串操作(省略循环、遍历等操作)

正则表达式仅用于字符串的操作

2 常规字符串操作与正则表达式的比较

要提取出字符串中"ashx521dasbx34sasdz275dasdzxd897"中连续的数字,并将结果保存在数组中["521", "34", "275", "897"]

传统字符串操作:需要遍历整个字符串,判断每个字符是否在"0"-"9"之间再进行相应的操作

/**
 * 使用一个暂时变量tmp保存连续为数值时的字符串,间断后再统一加入数组内;
 * 可能会出现最后一位是数字的情况,所以使用i<=str.length多走一次循环的else路径,将最后一组数组加入数组
 * 
 */
function findNum_two(str) {
    var arr = [];
    var tmp = "";
    // 遍历字符串,取出需要的数字
    for(var i=0; i<=str.length; i++) {   
        if(str.charAt(i) <= "9" && str.charAt(i) >= "0") {
            tmp += str[i];
        } else {
            if(tmp) {   // 如果tmp不为空
                arr.push(tmp);
                tmp = "";
            }
        }
    }

    return arr;
}
console.log(findNum_two(str));    //  [ "521", "34", "275", "897" ]

使用正则表达式:只需使用字符串的match()方法去匹配指定的规则(正则表达式即可)

function findNum (str) {
    return str.match(/d+/g);
}

console.log(findNum(str));   // [ "521", "34", "275", "897" ]

3 正则表达式写法

字面量写法:var re = /d+/gi;

构造函数写法:var re = new RegExp("d+", "gi");注意两个,因为JavaScript中需要转义

3.1 正则表达式中的转义字符

转义字符:多带带使用字母本身有意义;在前面加上后改变原有意义

3.2 量词

用来描述相邻的前面的单个字符匹配规则出现的次数

量词使用{a, b}表示,其中b可以省略,意义不同

3.3 字符类

使用[]描述一类字符,整体只代表一个字符,表示该字符在某个范围内。

/a[0-9]c/匹配三位字符串,第一位是a,第三位是c,第二位是"0"-"9"之间的任何一位都可以匹配成功

[]多种规则是或 |的关系:[0-9a-zA-Z]

整个字符类[0-9a-zA-Z]只代表一位字符

注意,字符类中的^表示非的意思,不在某个范围内[^d]表示非数字的字符

3.4 修饰符

g--global:全局匹配,找到所有的匹配项,不是在第一个匹配后停止

i--ignored:忽略大小写

m:多行,将开始字符^和结束字符$视为在多行上工作(每匹配一行的开始和结束以 分割)

u:将模式视为Unicode序列点的序列

3.5 匹配子项

对于复杂的正则表达式,可以使用()将其拆分为多个部分,replace(re, fn)回调函数中可以简化匹配内容的操作

var re = /(d+)(w)(S)/;

fn($0, $1, $2 ...)

$0代表正则表达式本身匹配到的内容:(d+)(w)(S)

$1代表正则表达式的第一个匹配子项:(d+)

$2代表正则表达式第二个匹配子项:(w)

...

3.6 重复子项

主要用于匹配字符串中重复的字符

var re = /(a)(b)(c)1/;1表示重复的第一个子项(b),第4个位置的字符与第1个位置的字符相同

var re = /(a)(b)(c)2/;2表示重复的第二个子项(b),第4个位置的字符与第2个位置的字符相同

var re = /(a)(b)(c)3/;3表示重复的第三个子项(c),第4个位置的字符与第3个位置的字符相同

...

3.7 逻辑或|

使用|代表逻辑或,|左右两个操作数只要有一个满足要求即可

3.8 开始、结束标记

不在[]中使用^^表示以最近的匹配字符规则开始整个匹配;

$表示以最近的匹配规则结束匹配

作用范围只是^之后的第一个子项;$前的第一个子项

4 正则表达式的方法

主要有4中方法用于操作正则表达式:

match()replace()search()是字符串的操作方法

test()exec()是正则表达式对象的操作方法

4.1 test()

根据RegExp去匹配字符串,如果匹配成功,返回true;匹配失败返回false主要用于逻辑判断

var str = "abxe2312dafxz";
var re = /d+/;

re.test(str);   // true
4.2 search()

根据RegExp去匹配字符串,返回第一个匹配成功字符串的首字符的索引;匹配失败返回-1用于查找字符的索引,类似字符串的indexOf()方法

str.search(re)

4.3 match()

根据RegExp去匹配字符串,如果匹配成功,将匹配的结果保存在数组中返回;匹配失败返回null默认第一次匹配后便停止继续匹配,使用修饰符g进行全局匹配

str.match(re)

4.4 replace(re, newstr)方法

根据RegExp去匹配字符串,如果匹配成功,将匹配的字符串更换为新的字符串newstr

replace()方法的参数re正则表达式是变量,必须使用new RegExp()方式创建re

var str = "a23gb";
var re = /d+/;

str.replace(re, "xy");   //  "axygb"

replace()方法的第二个参数可以是回调函数,其参数是每次匹配成功获取的字符串。每次匹配成功都会执行一次回调函数

5 实践 5.1 找到一个字符串中出现次数最多的字符及其出现的次数
var str = "1231asdaegj71836178asdhasssasalsdhdzxbczaslazxcnnffajshdhgagsgdssssasdzzxda";

var str = str.split("").sort().join("");   // 按顺序的字符序列

var re = /(w)1+/g;

var length = 0;
var val = "";   // 保存出现次数最多的字符

// $0代表每次匹配到的字符,$1代表第一个正则表达式子项(w)
str.replace(re, function ($0, $1) {  // 可以将匹配的字符当做变量操作
    if($0.length > length) {
        length = $0.length;
        val = $1;    // $1代表每次匹配的字符
    }
});
console.log(length);
console.log(val);
5.2 去掉字符串前后的空格

var re = /^s+|s+$/g;,使用字符串应用正则即可:str.replace(re, "")

5.3 常用正则匹配规则

QQ号:var re = /^[1-9]d{4,11}$/; :第一位是1-9中的数字,最后也是数字,总共5-12位

中文匹配:var re = /[u4e00-u9fa5]/;:使用Unicode编码进行匹配

emailvar re = /w+@[a-z0-9]+(.[a-z]+){1,3}/;:可能出现.com.cn.net

身份证:var re = /[1-9]d{14}|[1-9]d{17}|[1-9]d{16}x/i;

邮编:var re = /[1-9]d{5}/;

5.3 将常用正则表达式封装在一个对象中便于使用
var re = {
    email: /w+@[a-z0-9]+(.[a-z]+){1,3}/,
    chinese: /[u4e00-u9fa5]/,
    qq: /^[1-9]d{4,11}$/,
    id: /[1-9]d{14}|[1-9]d{17}|[1-9]d{16}x/i,
    trim: /^s+|s+$/
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82072.html

相关文章

  • 正则达式

    摘要:本文内容共正则表达式火拼系列正则表达式回溯法原理学习正则表达式,是需要懂点儿匹配原理的。正则表达式迷你书问世了让帮你生成和解析参数字符串最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写,作用是对字符串执行模式匹配。 JS 的正则表达式 正则表达式 一种几乎可以在所有的程序设计语言里和所有的计算机平台上使用的文字处理工具。它可以用来查找特定的信息(搜索),也可以用来查...

    bang590 评论0 收藏0
  • JavaScript正则达式的匹配模式

    摘要:选择分组和引用正则表达式的语法还包括指定选择项子表达式分组和引用前一子表达式的特殊字符。带圆括号的表达式的另一个用途是允许在同一正则表达式的后部引用前面的子表达式。 正则表达式(regular expression)是一个描述字符模式的对象。JavaScript的 RegExp类 表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进 行强大的模式匹配和文本检索与...

    wqj97 评论0 收藏0
  • JS正则达式入门,看这篇就够了

    摘要:如果遇到非常的复杂的匹配,正则表达式的优势就更加明显了。关于正则表达式书写规则,可查看,上面说的很清楚了,我就不贴出来了。替换与正则表达式匹配的子串,并返回替换后的字符串。结语正则表达式并不难,懂了其中的套路之后,一切都变得简单了。 前言 在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断...

    wenzi 评论0 收藏0
  • JavaScript 中的正则达式

    摘要:正则表达式的意义中的正则表达式使用表示,可以使用构造函数来创建对象,不过对象更多的是通过一种特殊的直接量语法来创建。用构造函数也可以定义一个与之等价的正则表达式,代码如下正则表达式的模式规则是由一个字符序列组成的。 正则表达式的模式匹配 正则表达式(regular expression)是一个描述字符模式的对象。javascript的RegExp对象表示正则表达式,String和Reg...

    _Dreams 评论0 收藏0
  • JavaScript中的正则达式

    Javascript的正则表达式是前端中比较重要的部分,正则表达式主要用于字符串处理,表单验证等场合,实用高效,文章主要对JavaScript中的正则的学习与总结 正则表达式的定义 正则表达式:是一个描述字符模式的对象,JavaScrip中正则表达式用RegExp对象表示,可以使用RegExp构造函数来创建正则对象 正则表达式的创建 1.字面量创建 var reg = /[a-z]/; 2.构...

    _Zhao 评论0 收藏0
  • 简单说 正则达式——要注意lastIndex属性

    摘要:返回是一个只读的布尔值,看这个正则表达式是否带有修饰符。方法,它的参数是一个字符串,用对某个字符串进行检测,如果包含正则表达式的一个匹配结果,则返回,否则返回。总结这次主要是说说,中正则表达式对象的个属性,而最需要注意的就是属性了。 说明 这篇文章,主要和大家聊聊JavaScript中RegExp对象的属性。 解释 每个RegExp对象都包含5个属性,source、global、ign...

    jokester 评论0 收藏0

发表评论

0条评论

edgardeng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<