`
ztplant
  • 浏览: 11179 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于js 的 match函数的一点个人理解(jquery.form.js match)

阅读更多

 

(转载请注明出处)

 

昨天读jquery.form的源代码,读到这么一句

 

url = (url.match(/^([^#]+)/)||[])[1];

 原文的解释是:clean url (don't include hash value) -- 可以解释为:把url中hash的部分去掉,即url中#号后面的部分去掉。那么此处的match函数到底是怎么起作用的?

 

我先看了一下match函数的官方解释,摘录如下:原文地址

match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。

我做了一个测试:

var url = "http://www.baidu.com#top";
alert(url.match(/^([^#]+)/);

 alert弹出的结果是:http:www.baidu.com,http:www.baidu.com

是一个数组,有两个元素,且两个元素一样。我不懂的地方是这两个元素是如何得来的?为什么会有两个一样的元素?

理解这个问题,首先解释的是正则表达式是什么意思:/^([^#]+)/的意思是从字符串的开头开始匹配,匹配一串不为‘#’的字符,所以该正则表达式匹配的是一个url从开头到第一个‘#’之间的字符串。很明显,此处是http://www.baidu.com。那么第二个元素是怎么回事?我仔细看了一下w3c对这个函数的解释,注意到这一句:它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。这意味着第二个元素是url与子串匹配的结果,这个子串就是正则表达式括号中的部分(我猜的,还没有得到确切的验证),即匹配一段不包含‘#’号的字符串。

那我如果有过个‘#’号呢?

如下例子

var url = "http://www.baidu.com#top#left#right";
alert(url.match(/^([^#]+)/));

 返回的值还是:http://www.baidu.com,http://www.baidu.com

这个主要是因为没有加g标记,字符串只匹配一次,所以尽管子串可以不用从头匹配但也因为只匹配一次所以也只能返回第一次匹配的串。下面加上g标记。并修改正则使其不从头开始匹配,代码如下:

var url = "http://www.baidu.com#top#left#right";
alert(url.match(/([^#]+)/g));

 此次的返回值是:http://www.baidu.com,top,left,right ,是整个url中所有与正则匹配的串。

之后我有测试了一下所谓子串的问题,我将正则的括号位置改成这样的:/^([^#])+/,这个改动之后,正则匹配的还是从开头到第一个'#'号之间的位置,但其子串意义为匹配不为'#'的字符,一次匹配一个,然后再做测试

var url = "http://www.baidu.com#top#left#right";
alert(url.match(/^([^#])+/));

 测试结果是:http://www.baidu.com,m,数组中的第二个元素是m。为什么是m不是h呢,估计是正则匹配的时候只匹配一次的意思是当主正则失配后子正则从当前失配的位置开始匹配。为此我有做了如下两个例子:

例一

var url = "aabbc#top";
alert(url.match(/^([^#]{2})+/));

返回的结果是: aabb,bb

例二

var url = "aabbc#top";
alert(url.match(/^([^#]{1,2})+/));

 返回的结果是:aabbc,c

由此,可见子正则是从主正则失配后开始匹配的。但是要证明此结论,还需做更多严谨的测试,或去阅读详细的官方文档。

 

以上这些见解只是我个人通过简单的测试得出的结论,在这些例子中我的猜想得到证实,但不一定说明我的结论是正确的。如若有兴趣,希望我的方法能带来灵感。

 

欢迎大神批评指正。

 

 

0
5
分享到:
评论

相关推荐

    jQuery表单验证.zip

    在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在网页开发中,表单验证是必不可少的一部分,确保用户输入的数据符合特定的格式和规则,以保证数据的准确...

    jQuery完全实例.rar

    jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...

    jQuery多张图片上传预览代码

    首先,我们需要理解jQuery的基本用法。jQuery是一个JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。要使用jQuery,我们首先需要在HTML文档中引入jQuery库的链接,通常是从CDN(内容分发网络)...

    jquery maskedinput 插件 Masked Input Plugin

    《jQuery Masked Input Plugin详解与应用》 在Web开发中,我们经常遇到需要对用户输入进行格式化的场景,比如电话号码、日期、信用卡号等。这时,jQuery Masked Input Plugin插件就能派上大用场。它是一款轻量级、...

    jquery简单的注册表单验证代码.zip

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及动画效果等任务。结合CSS,我们可以创建出交互性良好的用户体验。 首先,我们需要理解jQuery的基本用法。jQuery对象通过"$"符号表示,它可以用来...

    jQuery用户注册表单验证代码

    jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在用户注册过程中,表单验证是至关重要的,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验...

    jQuery实现渐隐表单提示.zip

    在前端开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本项目“jQuery实现渐隐表单提示”聚焦于使用jQuery来创建一种交互式的用户体验,即当用户填写表单时,提供逐渐...

    jQuery搜索框输入文字下拉提示菜单bootstrap风格autocomplete

    首先,我们需要引入jQuery库和Bootstrap的相关CSS及JS文件,确保页面支持Bootstrap的样式和功能。接着,引入jQuery autocomplete插件的JS文件。在HTML中创建一个input元素,作为搜索框,可以添加特定的class或者属性...

    jQuery多说QQ表情留言评论框代码.zip

    例如,我们可以使用jQuery来监听提交按钮的点击事件,并在事件处理函数中获取评论内容,进行预处理,然后通过多说API发送数据: ```javascript $(document).ready(function() { $('#submit-comment').click...

    javaScript验证大全

    2. jQuery插件:使用jQuery库,如`validate.js`,可以简化验证代码并提供更好的用户体验。 3. Form Validation API:HTML5引入了内置的表单验证API,如`required`属性、`pattern`属性等,与JavaScript结合可实现更...

    PHP注册用户信息验证附带JS效果提示

    5. 使用库或框架:为了简化开发,可以使用像jQuery、Vue.js或React这样的库或框架,它们提供了丰富的API和组件,帮助我们更轻松地实现交互效果。 总结,构建“PHP注册用户信息验证附带JS效果提示”系统,需要结合...

    表单验证js

    "表单验证js" 主题涉及到如何使用 jQuery 进行高效且用户体验友好的表单验证。 1. **基本概念** - **jQuery**:一个轻量级的 JavaScript 库,它简化了 JavaScript 编程,提供了丰富的 API 和插件生态系统。 - **...

    jquery自动完成简介

    ### jQuery自动完成插件详解 #### 一、概述 jQuery自动完成插件是基于jQuery库开发的一款实用工具,主要用于提供用户在输入时的提示和快速选择功能,通过搜索和过滤来帮助用户更快地找到并选择所需的值。此功能极...

    很好的js 验证表单

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,尤其是在客户端进行数据验证。在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高用户...

    jquey—validate简单步骤

    jQuery Validate是一个功能强大的JavaScript库,用于实现表单验证,确保用户输入的数据符合预设的规则和格式。通过结合PHP,我们可以创建一个高效且用户体验良好的前端验证系统,同时在服务器端进行二次验证,提供更...

    PHP-jQuery上传图片并裁切

    if (file.type.match(/image.*/)) { var reader = new FileReader(); reader.onload = function(e) { $('#preview').attr('src', e.target.result).show(); }; reader.readAsDataURL(file); } else { alert...

    validacionFormulario:jQuery + Boostrap

    3. JavaScript文件(如script.js):包含使用jQuery编写的表单验证逻辑。 4. 可能还会有其他辅助文件,如图片资源或额外的JavaScript库。 总结来说,"validacionFormulario: jQuery + Bootstrap"项目展示了如何结合...

    asp.net发表留言添加表情

    `lazyman图库.txt`可能包含了表情图片的资源列表,或者是一些关于表情库的说明。在实际项目中,这些表情图片通常会存储在服务器的某个目录下,如`images`目录,然后通过URL访问。 总的来说,实现ASP.NET中的留言...

    jQuery简单实现验证邮箱格式

    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"> ``` 接下来,我们需要编写JavaScript代码来处理邮箱验证。在jQuery中,我们通常使用`$(document).ready()`函数来确保页面加载完成后执行我们...

    jquery+正则实现统一的表单验证

    函数首先初始化一个标志变量`success`为`true`,然后遍历所有带有类名`form`的`input`元素。对于每一个元素,我们获取其`datatype`属性,使用`eval`函数将其转换为正则表达式对象。接着,我们检查用户输入的值是否与...

Global site tag (gtag.js) - Google Analytics