正则表达式

正则表达式,一个描述字符模式的对象。javascript的RegExp类表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进行强大的模式和匹配与替换功能。 -- from Javascript权威指南第六版

正则表达式的定义

js中的正则表达式用RegExp对象表示。

同其他的对象一样,可以有字面量与构造函数的方式来创建。

  • 对正则表达式直接量,定义为在包含在一对斜杠(/)之间的字符
    var regExp = /s$/;
  • 构造函数表达方式
    var regExp = new RegExp('s$');

选择、分组和引用

正则表达式的语法还包括指定选择项目、子表达式分组和引用前一子表达的特殊字符。

选择

` | ` 字符 用于分隔选择的字符,选择项的尝试匹配次序是从左向右,直到发现了匹配项目。如果左边的选择项匹配,就忽略右边的匹配项,即使产生更好的匹配。此处的逻辑于逻辑判断的` || `的短路操作类似。

分组

圆括号在正则表达式中的含义:
  • 把单独的项组合成子表达式,以便可以像处理一个独立的单元那样用 |,*,+,?等来对单元内的项进行处理。就是一个普通结合的运算符。

  • 在完整的模式中定义子模式,即分组。在分组之后,可以利用''+数字完成对前面子表达式的引用,即所谓的反向引用。从1开始。(不从0开始的原因,个人觉得,正则表达式中的0项,一般是整体匹配的结果。)

Notice 在使用exec的过程之中,提取出来的数组的索引,从0以后即分组中的子模式的值,然而有些数据并不是我们需要的,只是在操作上简单,只有结构上的含义,不需要像其他的子分组的值取出,并适当提高处理性能,就是上面提到的圆括号的作用的第一点,不含第二点的情形,那么我们可以在圆括号内部使用(?:)来处理,就是匹配不处理。另附MDN 上,RegExp.prototype.exec 的结果解释:

Property/Index Description
[0] The full string of characters matched
[1], ...[n ] The parenthesized substring matches, if any. The number of possible parenthesized substrings is unlimited.
index The 0-based index of the match in the string.
input The original string.
var str = '我有一个邮箱, 是 abc@itcast.cn, 还有 abc@126.com, 和 1234567@qq.com';
var r = /([a-zA-Z\d]+)@([a-zA-Z\d]+(?:\.[a-zA-Z\d]+)+)/g;
// var res = r.exec( str );
var res;
while ( res = r.exec( str ) ) {
console.log(res)
console.log( '邮箱是: ' + res[ 0 ] + ', 用户名: ' + res[ 1 ] + ', 主机名: ' + res[ 2 ] );
}

贪婪模式

凡是在正则表达式中, 涉及到次数限定的, 一般默认都是尽可能的多匹配。

取消贪婪模式. 在次数限定符后面加上 ?。

多个贪婪在一起的时候的强度:第一个最强 后面强度一样。

// 一般模式

/(\d+)(\d+)(\d+)/.exec('1234567');

// '12345','6','7'

// 取消贪婪模式
/(\d+?)(\d+)(\d+)/.exec('1234567'); // '1','23456','7'

用于模式匹配的String方法

String支持4种使用正则表达式的方法。如下:

  • String.prototype.serach(/regExp/g);
  • String.prototype.replace(/regExp/g,'string || $1 || fn');
  • String.prototype.match(/regExp/g)
  • String.prototype.split(/regExp/g)

RegExp对象

RegExp主要方法,exec,test...

常见的用法

1、实现‘123456789123’这样的数字字符串转化为'1,234,567,891'

var str = '123456789123';

str.split('')
.reverse()
.join('')
.replace(/(\d{3})/g,'$1,')
.split('')
.reverse()
.join('')
if(str.startWith(',')) str.slice(1); phoneNum = str;
formatedPhoneNum = phoneNum.replace(/(\d{3,3})/g, "$1\-");
formatedPhoneNum.slice(-1) === "-" && (formatedPhoneNum = formatedPhoneNum.slice(0,-1));

2、组件封装之中用到的模板

实现核心代码:

var regex = /(\{(\w+)\})/g
for (var i = 0, len = data.length; i < len; i++) {
var template = that.ajaxConfig.template.indexOf("%rank%") >=0
? that.ajaxConfig.template.replace("%rank%",(that.pageNum - 1)*ajaxConfig.data.limit + i + 1)
: that.ajaxConfig.template
while (regex.exec(template)) {
template = template.replace(RegExp.$1, data[i][RegExp.$2])
}
}

调用代码

new Scroll(".k_scroll>.scroll-wrap", {
url: "/tuhoKingPapaActivity/userRankList",
data: {
pageNum: 1,
limit: 15
},
template:`<li>
<span class="row-1 fl">%rank%</span>
<span class="row-2 fl">{nickname}</span>
<span class="row-3 fl">{pnum}</span>
</li>`
})

javascript 正则表达式学习的更多相关文章

  1. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  2. javascript正则表达式 - 学习笔记

    JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...

  3. javascript正则表达式学习(二)--位置匹配

    文章首发于sau交流学习社区 一.前言 正则表达式是匹配模式,要么是匹配字符,要么匹配位置. 其实在开发中很少用到匹配位置,本篇文章主要包含: 二.什么是位置 位置:相邻字符之间的位置. 三.如何匹配 ...

  4. javascript 正则表达式学习教程

    正则表达式 就是用某种模式去匹配一类字串的一个公式 RegExp 对象表示正则表达式 Regular Expression 正则表达式是很多程序设计语法都支持的 //①隐式创建 var regexp ...

  5. JavaScript 正则表达式学习笔记

    定义规则让计算机去处理字符串正则表达式写法: //第一种 var reg = new RegExp('ab'); //第二种 var reg = /ab/; 量词:{} [a-z] 从小写a-z [A ...

  6. JavaScript正则表达式学习笔记之一 - 理论基础

    自从年前得空写了两篇文章之后就开始忙了,这一忙就是2个月

  7. 第一百零五节,JavaScript正则表达式

    JavaScript正则表达式 学习要点: 1.什么是正则表达式 2.创建正则表达式 3.获取控制 4.常用的正则 假设用户需要在HTML表单中填写姓名.地址.出生日期等.那么在将表单提交到服务器进一 ...

  8. 深入浅出的javascript的正则表达式学习教程

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

  9. 正则表达式(javascript)学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

随机推荐

  1. LoadRuner12.53教程(一)

    LoadRunner教程 L   o   a   d   R   u   n   n   e   r   jiào教   chéng程 Welcome to the LoadRunner tutori ...

  2. delete attempted to return null from a method with a primitive return type (int)

    今天被自己给蠢死了 今天在代码中遇到这个错误, 百度翻译一下:映射方法,从一org.system.mapper.child.chmorganizationexaminationmapper.delet ...

  3. [SHOI2009] 会场预约

    Description 题意:支持操作: 按顺序在数轴上插入一条线段,删除并询问所有与这条线段有交的线段个数. 询问当前数轴上一共有多少条线段. Solution 想做了很久的题=.= 观察到和线段\ ...

  4. [SCOI2010] 连续攻击游戏

    题目 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一 ...

  5. 流程控制<二>

    上一篇:Numbers.Strings.Lists 笔记<一>下一篇:数据结构-Python3.7<三> 如果需要修改迭代中的数据,建议先赋值一个副本(e.g:序列,切片复制的 ...

  6. WCF Service 转换为Web Service 中字段属性

    1.新建WCF服务,服务中包含对象 2.部署WCF服务,并将其转换为应用程序 3.通过添加服务引用,使用WCF服务 4.调用对应的对象时需要对应的值设置为True. 参考:https://cloud. ...

  7. 漫画|你还记得原生的JDBC怎么连接数据库吗?

    数据表的设计范式 在实际开发中最为常见的设计范式有三个: 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库表满足了第一范式: 第二范式需要确保数据库表中的每一列都 ...

  8. returnFunc.js

    var cyn = function(){ console.log("one") return function(){ console.log("two") } ...

  9. Django框架理解和使用常见问题

    1.什么是中间件? 中间件是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出. 中间件一般做认证或批量请求处理,django中的中间 ...

  10. VUE 配置vue-devtools调试工具

    1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然 ...