正则表达式

正则表达式,一个描述字符模式的对象。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. Java 容器源码分析之ArrayBlockingQueue和LinkedBlockingQueue

    Java中的阻塞队列接口BlockingQueue继承自Queue接口. BlockingQueue接口提供了3个添加元素方法. add:添加元素到队列里,添加成功返回true,由于容量满了添加失败会 ...

  2. mysql存储引擎选择(转)

    MySQL 的存储引擎可能是所有关系型数据库产品中最具有特色的了,不仅可以同时使用多种存储引擎,而且每种存储引擎和MySQL之间使用插件方式这种非常松的耦合关系.由于各存储引擎功能特性差异较大,这篇文 ...

  3. Tomcat启动时项目重复加载的问题

    最近在项目开发测试的时候,发现Tomcat启动时项目重复加载,导致资源初始化两次的问题  导致该问题的原因: 如下图:在Eclipse中将Server Locations设置为“Use Tomcat ...

  4. 微信分享JSSDK-invalid signature签名错误的解决方案

    核对官方步骤,确认签名算法. 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验. 确认con ...

  5. 检测到是移动端还是PC端进入页面,加载不同样式表现

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...

  6. ArrayList和LinkedList的区别以及优缺点

    作用 ArrayList和LinkedList都是实现了List接口的容器类,用于存储一系列的对象引用.他们都可以对元素的增删改查进行操作. 对于ArrayList,它在集合的末尾删除或添加元素所用的 ...

  7. Why is one loop so much slower than two loops?

    Question: Suppose a1, b1, c1, and d1 point to heap memory and my numerical code has the following co ...

  8. 利用反射调用注解,模仿Spring

    简介 在开发中,我们经常用的就是利用@RequestMapping来调用我们自己的逻辑,现在我们来创建属于自己的注解模仿一下它. 1.新建属于自己的注解@SeayaMapping @Target({E ...

  9. CTO 之“六脉神剑”

    他深谙电商之道,从零打造 1 号店网站及供应链系统,以技术引领业务发展.他是欧电云创始人韩军,下面将由他分享完美 CTO “六脉神剑”的经验之谈. 首先,从对 CTO 的一个认识误区讲起. 不写代码的 ...

  10. [VUE ERROR] Invalid prop: type check failed for prop "list". Expected Array, got Undefined

    错误原因: 子组件 props -> list 要求接收的数据类型是 Array, 然而实际接收到的是 Undefined. 子组件代码: props: { list: { type: Arra ...