`
lucane
  • 浏览: 121717 次
  • 性别: Icon_minigender_1
  • 来自: 江湖
社区版块
存档分类
最新评论

JavaScript正则表达式小知识

阅读更多
需要有JavaScript和Regular Expressions基本知识

1、Regular Expression Object
正则表达式对象:本对象包含正则表达式模式以及表明如何应用模式的标志。

2、RegExp Object
RegExp对象:保存有关正则表达式模式匹配信息的固有全局对象。

这两个是不一样的,具体的参见参考手册
http://msdn.microsoft.com/en-us/library/htbw4ywd(v=VS.85).aspx
这个是Microsoft官方的参考手册
暂时没有发现MDC等其它地方的参考手册有明确说明这一点
https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions
但是这里面提到了这类特性的用法

下面看两段小小的代码,也是从百度页面上抠下来的,做了些小的调整

addClassName = function(d, f) {

    // ...    
    // 判断这个DOM对象是否存在,不存在就直接返回,这些代码都被我省掉了


    // 先把这个DOM对象的class属性的值按space截开转成字符串数组b
    // c是一个去前后空格的函数,简单测试情况下也可以去掉
    var b = d.className.split(" "), c = trim;


    if(!new RegExp("(^|\\s{1,})" + c(f) + "(\\s{1,}|$)").test(d.className)) {

        d.className=c(b.concat(f).join(" "));

    }

};


这个函数看名字就很清楚了,是给页面上的对象的class属性添加值,因为class属性可以有多个用space隔开的值
只是在添加值之前做了很多判断和处理,我们只看正则表达式相关的
也就是那个if语句内的情况
把传进来的属性值和已经存在的class属性值相比较,如果不存在就添加到尾部,如果存在就什么都不做
它通过new创建的正则表达式对象一共可以侦测出class属性值是类似以下的这几种情况,也满足了功能需求

red noborder flashing
noborder flashing
red noborder
noborder


也就是当我们传入"noborder"这个值的时候,如果原来class属性值已经是类似上面这四种情况都可以被侦测出来


再来看另外的一段代码,这段代码跟上面是相反的,就是把class属性中某个指定的值去掉(如果已经存在这个指定的值的话)

removeClassName = function(d, f) {

    // ...    
    // 判断这个DOM对象是否存在,不存在就直接返回,这些代码都被我省掉了


    var c = trim, re = new RegExp("(^|\\s{1,})" + c(f) + "(\\s{1,}|$)", "g");

    d.className = c(d.className.replace(re, "$2"));

};


替换函数是查找到了就替换,并把它替换成$2,这个$2就是RegExp全局对象的一个属性,它始终存储的是最后一次匹配的结果,一共可以保存$1到$9共9个子匹配的结果
如果没有子匹配,默认的$n值就是空字符串
比如我们这里的re正则表达式对象只有两个子匹配,那么就只可能有$1和$2有值,其它都是空串
这里我们用$2来替换,实际$2返回的可能只有任何的空白字符或者字符串结尾,可以用charCodeAt函数将其unicode编码打印出来观察

通过例子来看
如果:
d.className = "red noborder flashing"
f = "noborder"
最后替换的结果就是"red flashing"

如果:
d.className = "noborder flashing"
f = "noborder"
最后替换的结果就是" flashing"

如果:
d.className = "red noborder"
f = "noborder"
最后替换的结果就是"red"

如果:
d.className = "noborder"
f = "noborder"
最后替换的结果就是""
分享到:
评论

相关推荐

    javascript正则表达式迷你书 (1).pdf

    JavaScript 正则表达式迷你书 本书是 JavaScript 正则表达式的入门级教程,旨在帮助读者快速掌握正则表达式的基本概念和应用。下面是本书的知识点摘要: 第一章:正则表达式字符匹配攻略 * 两种模糊匹配:横向...

    JavaScript正则表达式迷你书

    本书从字符匹配、位置匹配、括号的作用、回溯法原理、拆分、构建和编程等方面深入讲解了JavaScript正则表达式的相关知识,适合需要进行字符串匹配、提取、验证等操作的读者学习。 第1章介绍了正则表达式字符匹配的...

    javascript正则表达式综合练习

    总结来说,JavaScript正则表达式是一个强大的文本处理工具,通过理解和熟练运用上述知识点,开发者可以有效地处理字符串操作,进行数据验证,以及在各种场景下实现复杂的数据匹配。`validator.js`文件可以作为实践...

    Java使用正则表达式提取XML节点内容的方法示例

    1. JavaScript正则表达式在线测试工具:http://tools.jb51.net/regex/javascript 2. 正则表达式在线生成工具:http://tools.jb51.net/regex/create_reg 这些工具可以帮助开发者快速测试和生成正则表达式,从而提高...

    javaScript正则表达式讲解用ppt

    掌握这些知识点后,开发者可以利用JavaScript的正则表达式功能进行复杂的文本操作,提高代码的效率和灵活性。无论是数据验证、文本处理还是字符串操作,正则表达式都是JavaScript程序员不可或缺的工具。

    javascript正则表达式表单验证大全

    以下是从标题、描述、标签以及部分内容中提取的关键知识点,详细解释了如何使用JavaScript正则表达式进行各种常见场景下的表单验证。 #### 用户名验证 正则表达式:`^[a-zA-Z][\w]{5,17}$` 该表达式确保用户名由...

    Javascript正则表达式测试网页.rar

    JavaScript正则表达式是网页开发中的重要工具,用于处理文本数据的验证、查找、...通过这个手册,开发者不仅可以学习到基础的正则表达式知识,还能了解到更高级的技巧,如正则表达式在复杂文本处理和数据提取中的应用。

    java \javascript 正则表达式

    正则表达式是一种强大的文本处理工具,用于在Java和JavaScript中进行字符串匹配、搜索、替换等操作。在编程中,正则表达式是处理文本数据不可或缺的一...记得定期复习和测试自己的知识,以保持对正则表达式的熟练掌握。

    常用正则表达式大全.txt

    根据提供的文件信息,我们可以整理出一系列与正则表达式相关的...以上内容概括了从文件中提取出来的正则表达式知识点,这些知识点覆盖了正则表达式的多个应用场景,对于从事软件开发、数据分析等领域的人来说非常实用。

    精通正则表达式(第三版)简体中文版

    - **JavaScript中的正则表达式**:JavaScript的正则表达式对象提供了丰富的功能,包括全局匹配、忽略大小写等选项。 - **.NET框架中的正则表达式**:通过System.Text.RegularExpressions命名空间提供支持。 #### 六...

    JavaScript正则表达式匹配 div style标签_.docx

    本文主要介绍了JavaScript正则表达式匹配div style标签的相关知识点。通过对给定的测试字符串进行分析,我们可以了解到 JavaScript 正则表达式在匹配 div style 标签时的应用。 1. 正则表达式的定义 正则表达式...

    javascript 30分钟学会正则表达式

    在JavaScript的世界里,正则表达式(Regular Expression)是一种强大的文本...通过30分钟的学习,你将具备基本的正则表达式知识,能够应对日常开发中的大多数需求。不断实践和探索,你将在正则的世界里更加得心应手。

    正则表达式调试工具

    正则表达式调试过程中,用户可能会遇到以下关键知识点: - **元字符**:如`.`代表任意字符,`\d`代表数字,`\w`代表字母、数字或下划线,`\s`代表空白字符等。 - **量词**:如`*`表示零个或多个,`+`表示一个或多...

    JavaScript正则表达式迷你书(1.1版)

    JavaScript正则表达式是编程语言JavaScript中的一个重要组成部分,它用于处理字符串模式匹配和搜索替换,是数据验证、文本处理和信息提取的关键工具。在1.1版的《JavaScript正则表达式迷你书》中,作者深入浅出地...

    源码(精通正则表达式&实战正则表达式)

    总之,通过这个资源,学习者不仅可以系统地学习正则表达式的理论知识,还能通过实例和源码加深对正则表达式的应用能力,这对于任何需要处理文本的JavaScript开发者来说都是极其宝贵的财富。无论是前端开发、后端开发...

    Javascript正则表达式

    ### JavaScript中的正则表达式详解 #### 一、正则表达式基础概念 正则表达式(Regular Expression),...通过掌握这些基础知识和实践案例,你可以更深入地了解如何在JavaScript中有效使用正则表达式进行字符串处理。

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十:正则表达式

    掌握这些知识点后,你将能够灵活地使用正则表达式进行字符串处理,提高Web前端开发效率。通过不断练习和实践,你会发现正则表达式是解决许多复杂文本问题的有力工具。在头歌教学实践平台上,你可以找到更多关于...

    JavaScript经典正则表达式实战

    JavaScript正则表达式是编程语言JavaScript中的一个重要组成部分,它用于处理文本字符串,进行模式匹配、查找、替换等操作。在JavaScript中,正则表达式是一种强大的工具,可以帮助开发者实现复杂的数据验证、文本...

    正则表达式(日期校验)

    在深入了解具体实现之前,我们先简要回顾一下正则表达式的相关概念以及JavaScript中的日期对象。 ##### 1. 正则表达式基础 - **语法结构**:正则表达式是由一系列字符和特殊符号组成的模式串,用于匹配字符串中的...

Global site tag (gtag.js) - Google Analytics