正则表达式

正则表达式,一个描述字符模式的对象。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. win32编程简介

    win32编程简介 复习Win32整理下知识. 为什么学习win32? 我们要编写windos程序.都离不开API. 也就是我们所说的win32程序. 所以学好win32是你能不能再windows下编 ...

  2. 信号为E时,如何让语音识别脱“网”而出?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯教育云发表于云+社区专栏 一般没有网络时,语音识别是这样的 ▽ 而同等环境下,嵌入式语音识别,是这样的 ▽ 不仅可以帮您边说边识. ...

  3. Haproxy+Heartbeat 高可用集群方案操作记录

    之前详细介绍了haproxy的基础知识点, 下面记录下Haproxy+Heartbeat高可用web集群方案实现过程, 以加深理解. 架构草图如下: 1) 基本环境准备 (centos6.9系统) 1 ...

  4. Django之模型层(多表操作)

    一.创建模型 1,一对多关系 一本书只有一个出版社,一个出版社可以出版多本书,从而书与出版社之间就构成一对多关系,书是‘多’的一方,出版社是‘一’的一方,我们在建立模型的时候,把外键写在‘多’的一方, ...

  5. java awt学习笔记

    最近这两天,花了些时间温习了java.awt的学习,故今日花些时间写下自己的总结吧. 1.常见的组件:Button.TextArea.Label.Checkbox.TextField Containe ...

  6. Asp.Net4.5 mvc4(二) 页面创建与讲解

    一.Contorl 通过目录结构我们可以看到contorllers类的命名方式 命名规则:前缀+Controller. 在看看contorller中的action方法 using System; us ...

  7. MVC HtmlHelper用法

    HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了当前可用的一些 HTML 帮助器. 本主题演示所列出的带有星号 (*) 的帮助器. ActionLink - Links to a ...

  8. ModBus通信协议的【传输方式】

    1.Modbus 传输方式 标准的Modbus口是使用一RS-232C兼容串行接口,它定义了连接口的针脚.电缆.信号位.传输波特率.奇偶校验.控制器能直接或经由Modem组网.     控制器通信使用 ...

  9. 了解java虚拟机—在TALB上分配对象(10)

    由于对象一般会分配在堆上,而堆是全局共享的.因此在同一时间,可能有多个线程在堆上申请空间.每次对象分内都必须要进行同步,因此TLAB这种线程专属的区域来避免多线程冲突.TLAB本身占用了eden区的空 ...

  10. 两个inline-block消除间距和对齐(vertical-align)

    一.神奇的两个inline-block 很初级的问题,无聊决定写一个故事. 故事的主人公很简单,两个inline-block元素.代码如下,为了看起来简单明了,写得很简陋.效果图如右.发现有两个问题. ...