资讯专栏INFORMATION COLUMN

简单学习 JavaScript 正则表达式

nevermind / 1127人阅读

摘要:对于对象,方法返回一个该正则表达式的字面量。显示显示正则表达式在的应用一个在字符串中执行查找匹配的方法,它返回一个数组或者在未匹配到时返回。

为什么要用正则表达式

简单的说:我们与字符串接触的频率非常之高,正则表达式可以极大的提高复杂文本分析的效率,快速匹配出复杂的字符串。

创建一个正则表达式

直接量语法(字面量)

var expression = /pattern/flags ;
//pattern 是要匹配的字符串模式
//flags用来标记正则表达式的行为: i 不区分大小写;g 表示全局搜索 ;m 表示多行模式
var reg = /ab/i ,表示匹配 字符串 "ab" 不区分大小写

调用RegExp对象的构造函数

//RegExp 是js中一个内置的对象,是正则表达式的缩写
var expression = new RegExp(pattern,flags)
//flags 和直接量语法一致
//pattern 可以是字符串模式,也可以是一个标准的正则表达式,后者必须省略 flags
//可以写成var reg = new RegExp("ab","i")  或者var reg = new RegExp(/ab/i)
//不能写成 var reg = new RegExp(/ab/,"i")

ES5中规定:使用直接量必须像直接调用RegExp构造函数一样,每次都创建一个新的RegExp实例,所以
上面2种方式创建正则表达式,除了过程不一样,效果是一样的。

RegExp每个实例都有如下属性:

global:布尔值,表示实例是否设置了 g 标志

ignoreCase:布尔值,表示是否设置了 i 标志

multiLine:布尔值,表示是否设置了m 标志

source:返回创建RegExp对象实例时指定的表达式纯文本字符串。不包含后面的标志

lastIndex:整数,表示实例在接下来的一次搜索匹配项的开始位置,默认从0开始

使用正则表达式的实例方法

RegExp.prototype.exec()

exec() 方法为指定的一段字符串执行搜索匹配操作,返回包含第一个匹配项的数组,regexObj.exec(str) ,没有匹配到则返回 null,返回的数组是Array的实例,而且返回值还包含另外2个属性:index: 匹配到的字符位于原始字符串的基于0的索引值input: 原始字符串`

var myRe = /ab*/g;
var str = "abbcdefabh";
var oo = myRe.exec(str)
// oo ==> ["abb"] 
// oo.index ==> 0 
// myRe.lastIndex ==> 0
// 从返回结果可以看出来,即使我们设置了全局的g,exec也不会一次性返回所有的匹配结果
// 因为其定义就是  返回包含`第一个匹配项`的数组,只要第一次匹配到,后面就不继续执行
// 我们再执行一次
oo = myRe.exec(str)
// oo ==> ["ab"] 
// oo.index ==> 3 
// myRe.lastIndex ==> 3
// 再次执行之后可以看到 匹配项和一些属性值都发生了变化,说明 这次并不是从头开始

官方说明:当正则表达式使用 "g" 标志时,可以多次执行 exec 方法来查找同一个字符串中的成功匹配。当你这样做时,查找将从正则表达式的 lastIndex 属性指定的位置开始(也就是说下次的查询将在上次匹配成功后面开始匹配,而且会循环,在匹配不到的时候,会从头开始)。(test() 也会更新 lastIndex 属性)。
不加"g" 标志的时候,每次都是从 0 开始,所以各种属性也不会改变

exec() 方法还有一个重要的作用:匹配捕获组

var str= "cat2,hat8" ;
var reg=/c(at)/ ;  
console.info(reg.exec(str));//运行返回   ["cat2", "at"]
加了捕获组的时候,结果会把捕获组一起返回,不加则没有,支持多个捕获组

注意 IEjavascriptlastIndex 设计上存在偏差,没加g的情况下也会每次发生改变,慎用

RegExp.prototype.test()
接收一个字符串参数,regexObj.exec(str),匹配返回true,否则false

RegExp.prototype.toString() ( RegExp.prototype.toLocaleString())

RegExp 对象覆盖了 Object 对象的 toString() 方法,并没有继承 Object.prototype.toString()。对于 RegExp 对象,toString 方法返回一个该正则表达式的字面量

myExp = new RegExp("a+b+c");
alert(myExp.toString());       // 显示 "/a+b+c/"

foo = new RegExp("bar", "g");
alert(foo.toString());         // 显示 "/bar/g"
正则表达式在 String 的应用

match
一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null

var oo = "121212".match(/1/g)
oo
//["1", "1", "1"]
var oo = "121212".match(/1/)
oo
//["1"]

replace
一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。

"121212".replace(/1/g,",")
//",2,2,2"

split
一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。

//以数字分割字符串
"a1b2c33d4".split(/d*/)
//["a", "b", "c", "d", ""]

search
一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。

//查找连续2个数字的位置
"a1b2c33d4".search(/(d){2}/)
// 5
小练习

把一串数字字符串千分位方式(逗号)转化成金额符号

分析要点:

金额的千分位是从右往左,每3位加一个逗号,但是正则表达式里面从右往左不是很方便,所以第一步要把数字颠倒过来,字符串并没有直接的颠倒方法,数组有,Array.prototype.reverse.call([1,2,3,4]) ==>[4, 3, 2, 1],字符串转数组也是很方便的,String.prototype.split.call("1234","") ==> ["1", "2", "3", "4"]

再把颠倒的数组拼接成字符串 Array.prototype.join.call([4,3,2,1],"")==> 4321

小数点后面的不需要处理,所以我们要获取 String.prototype.split.call("12345.678",".")[1] ==> 12345 因为我们这里已经反转了,所以真正要转化的数字在第二个

前面都是准备工作,现在需要用正则表达式处理字符串,匹配连续的3位数字分割成数组 d{3} 表示连续3个数字 String.prototype.match.call("1234",/d{3}/) ==> ["123"],这里把后面的一位数字和2位数字直接忽略了,并且没有全局匹配,所以我们要补充一下。

String.prototype.match.call("1234567891",/d{3}|d{2}|d{1}/g)
//["123", "456", "789", "1"]

最后就把数组用逗号连接,在用小数点和之前的小数位加在一起,再像第一步那样反转一下顺序就可以了。

例子代码

function money_thousandth (str){
    //先检查是不是符合数字类型
    if(isNaN(str)){
        return "必须传入数字或者数字字符串"
    }
    str = str.toString();
    //反转顺序并分割小数点
    var arr = str.split("").reverse().join("").split(".");
    //全局优先匹配连续的3位数字,或者2位,或者1位
    var reg = /d{3}|d{2}|d{1}/g;
    //有小数点取第二位,没有则取第一位
    var thousand = arr[1] || arr[0] ;
    //分割数组 
    var result_arr =  thousand.match(reg);
    //逗号拼接分割好的金额
    var result_str = result_arr.join(",");
    //与小数点前面加起来
    var result = arr[1] ?   arr[0] + "."+ result_str  : result_str
    //返回颠倒的数字字符串
    return result.split("").reverse().join("")
}
money_thousandth(1234567898.12)
//"1,234,567,898.12"
money_thousandth("1234567898.12")
//"1,234,567,898.12"

点击查看正则表达式常用语法

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

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

相关文章

  • 正则达式

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

    bang590 评论0 收藏0
  • JavaScript正则进阶之路——活学妙用奇淫正则达式

    摘要:正则大法好,正则大法好,正则大法好,重要的事情说三遍。第二部分,这个部分是整个表达式的关键部分。学习正则如果还没有系统学习正则表达式,这里提供一些网上经典的教程供大家学习。正则表达式使用单个字符串来描述匹配一系列匹配某个句法规则的字符串。 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同...

    BearyChat 评论0 收藏0
  • JavaScript正则进阶之路——活学妙用奇淫正则达式

    摘要:正则大法好,正则大法好,正则大法好,重要的事情说三遍。第二部分,这个部分是整个表达式的关键部分。学习正则如果还没有系统学习正则表达式,这里提供一些网上经典的教程供大家学习。正则表达式使用单个字符串来描述匹配一系列匹配某个句法规则的字符串。 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同...

    APICloud 评论0 收藏0
  • H5学习

    摘要:为此决定自研一个富文本编辑器。本文,主要介绍如何实现富文本编辑器,和解决一些不同浏览器和设备之间的。 对ES6Generator函数的理解 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。 JavaScript 设计模式 ② 巧用工厂模式和创建者模式 我为什么把他们两个放在一起讲?我觉得这两个设计模式有相似之处,有时候会一个设计模式不能满...

    aristark 评论0 收藏0

发表评论

0条评论

nevermind

|高级讲师

TA的文章

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