javascript 正则表达式学习

正则表达式详解

最新推荐文章于 2025-11-27 12:57:01 发布

转载最新推荐文章于 2025-11-27 12:57:01 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lakeInHeart/p/7474131.html

文章标签：

#javascript #ViewUI

本文详细介绍了JavaScript中的正则表达式概念与应用，包括正则表达式的创建方式、选择、分组、引用以及贪婪模式等内容，并提供了实际的代码示例。

正则表达式

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

正则表达式的定义

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

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

对正则表达式直接量,定义为在包含在一对斜杠（/）之间的字符
js var regExp = /s$/;
构造函数表达方式
js 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>`
})