JS 正则表达式


第10101010章正则表达式 学 习要 点: 1.什 么是 正则 表达 式 2.创 建正 则表 达式 3.获 取控 制 4.常 用的 正则 主讲教师:李炎恢 合作 网站: http://http://http://http://www.ibeifeng.comwww.ibeifeng.comwww.ibeifeng.comwww.ibeifeng.com 讲师博客: http://hi.baidu.com/http://hi.baidu.com/http://hi.baidu.com/http://hi.baidu.com/李炎恢 假设用户需要在HTML 表单中填写姓名、地址、出生日期等。那么在将表单提交到服 务 器进 一步 处理 前, JavaScript 程 序会 检查 表单 以确 认用 户确 实输 入了 信息 并且 这些 信息 是 符 合要 求的 。 一.什 么是 正则 表达 式 正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript 的RegExp 类 表 示正 则表 达式 ,而String 和RegExp 都 定义 了使 用正 则表 达式 进行 强大 的模 式匹 配和 文本 检 索与 替换 的函 数。 正 则表 达式 主要 用来 验证 客户 端的 输入 数据 。用 户填 写完 表单 单击 按钮 之后 ,表 单就 会 被 发送 到服 务器 ,在 服务 器端 通常 会用 PHP、ASP.NET 等 服务 器脚 本对 其进 行进 一步 处理 。 因 为客 户端 验证 ,可 以节 约大 量的 服务 器端 的系 统资 源, 并且 提供 更好 的用 户体 验。 二.创 建正 则表 达式 创 建正 则表 达式 和创 建字 符串 类似 ,创 建正 则表 达式 提供 了两 种方 法 ,一 种是 采用 new 运 算符 ,另 一个 是采 用字 面量 方式 。 1.两 种创 建方 式 var box = new RegExp('box'); //第 一个 参数 字符 串 var box = new RegExp('box', 'ig'); //第 二个 参数 可选 模式 修饰 符 模 式修 饰符 的可 选参 数 参数 含义 i 忽 略大 小写 g 全 局匹 配 m 多 行匹 配 var box = /box/; //直 接用 两个 反斜 杠 var box = /box/ig; //在 第二 个斜 杠后 面加 上模 式修 饰符 2.测 试正 则表 达式 RegExp 对 象包 含两 个方 法 :test()和exec(),功 能基 本相 似 ,用 于测 试字 符串 匹配 。test() 方 法在 字符 串中 查找 是否 存在 指定 的正 则表 达式 并返 回布 尔值 ,如 果存 在则 返回 true,不存 在则返回false。exec()方法也用于在字符串中查找指定正则表达式,如果exec()方法执行成 功 ,则 返回 包含 该查 找字 符串 的相 关信 息数 组。 如果 执行 失败 ,则 返回 null。 RegExp 对 象的 方法 方法 功能 test 在 字符 串中 测试 模式 匹配 ,返 回 true 或false exec 在 字符 串中 执行 匹配 搜索 ,返 回结 果数 组 /*使用new 运 算符 的 test 方 法示 例 */ var pattern = new RegExp('box', 'i'); //创 建正 则模 式, 不区 分大 小写 var str = 'This is a Box!'; //创 建要 比对 的字 符串 alert(pattern.test(str)); //通过test()方 法验 证是 否匹 配 /*使 用字 面量 方式 的 test 方 法示 例 */ var pattern = /box/i; //创 建正 则模 式, 不区 分大 小写 var str = 'This is a Box!'; alert(pattern.test(str)); /*使 用一 条语 句实 现正 则匹 配 */ alert(/box/i.test('This is a Box!')); //模 式和 字符 串替 换掉 了两 个变 量 /*使用exec 返 回匹 配数 组 */ var pattern = /box/i; var str = 'This is a Box!'; alert(pattern.exec(str)); //匹 配了 返回 数组 ,否 则返 回 null PS:exec 方 法还 有其 他具 体应 用, 我们 在获 取控 制学 完后 再看 。 3.使 用字 符串 的正 则表 达式 方法 除了test()和exec()方 法, String 对 象也 提供 了 4个 使用 正则 表达 式的 方法 。 String 对 象中 的正 则表 达式 方法 方法 含义 match(pattern) 返回pattern 中 的子 串或 null replace(pattern, replacement) 用replacement 替换pattern search(pattern) 返 回字 符串 中 pattern 开 始位 置 split(pattern) 返 回字 符串 按指 定 pattern 拆 分的 数组 /*使用match 方 法获 取获 取匹 配数 组 */ var pattern = /box/ig; //全 局搜 索 var str = 'This is a Box!,That is a Box too'; alert(str.match(pattern)); //匹 配到 两个 Box,Box alert(str.match(pattern).length); //获 取数 组的 长度 /*使用search 来 查找 匹配 数据 */ var pattern = /box/ig; var str = 'This is a Box!,That is a Box too'; alert(str.search(pattern)); //查 找到 返回 位置 ,否 则返 回 -1 PS: 因为 search 方 法查 找到 即返 回, 也就 是说 无需 g全局 /*使用replace 替 换匹 配到 的数 据 */ var pattern = /box/ig; var str = 'This is a Box!,That is a Box too'; alert(str.replace(pattern, 'Tom')); //将Box 替 换成 了 Tom /*使用split 拆 分成 字符 串数 组 */ var pattern = //ig; var str = 'This is a Box!,That is a Box too'; alert(str.split(pattern)); //将 空格 拆开 分组 成数 组 RegExp RegExp RegExp RegExp 对 象的 静态 属性 属性短名 含义 input $_ 当 前被 匹配 的字 符串 lastMatch $& 最 后一 个匹 配字 符串 lastParen $+ 最 后一 对圆 括号 内的 匹配 子串 leftContext $` 最 后一 次匹 配前 的子 串 multiline $* 用 于指 定是 否所 有的 表达 式都 用于 多行 的布 尔值 rightContext $' 在 上次 匹配 之后 的子 串 /*/*/*/*使 用静 态属 性 */*/*/*/ var pattern = /(g)oogle/; var str = 'This is google!'; pattern.test(str); //执 行一 下 alert(RegExp.input); //This is google! alert(RegExp.leftContext); //This is alert(RegExp.rightContext); //! alert(RegExp.lastMatch); //google alert(RegExp.lastParen); //g alert(RegExp.multiline); //false PS:Opera 不支持input、lastMatch、lastParen 和multiline 属性。IE 不支持multiline 属 性。 所 有的 属性 可以 使用 短名 来操 作 RegExp.input 可以改写成RegExp['$_'],依次类推。但RegExp.input 比较特殊,它还可 以 写成 RegExp.$_。 RegExp RegExp RegExp RegExp 对 象的 实例 属性 属性 含义 global Boolean 值 ,表 示 g是 否已 设置 ignoreCase Boolean 值 ,表 示 i是 否已 设置 lastIndex 整 数, 代表 下次 匹配 将从 哪里 字符 位置 开始 multiline Boolean 值 ,表 示 m是 否已 设置 Source 正 则表 达式 的源 字符 串形 式 /*使 用实 例属 性 */ var pattern = /google/ig; alert(pattern.global); //true, 是否 全局 了 alert(pattern.ignoreCase); //true, 是否 忽略 大小 写 alert(pattern.multiline); //false, 是否 支持 换行 alert(pattern.lastIndex); //0, 下次 的匹 配位 置 alert(pattern.source); //google, 正则 表达 式的 源字 符串 var pattern = /google/g; var str = 'google google google'; pattern.test(str); //google, 匹配 第一 次 alert(pattern.lastIndex); //6, 第二 次匹 配的 位 PS:以 上基 本没 什么 用 。并且lastIndex 在 获取 下次 匹配 位置 上 IE和 其他 浏览 器有 偏差 , 主 要表 现在 非全 局匹 配上 。 lastIndex 还 支持 手动 设置 ,直 接赋 值操 作。 三.获 取控 制 正 则表 达式 元字 符是 包含 特殊 含义 的字 符 。它 们有 一些 特殊 功能 ,可 以控 制匹 配模 式的 方 式。 反斜 杠后 的元 字符 将失 去其 特殊 含义 。 字 符类 :单 个字 符和 数字 元 字符 /元 符号 匹 配情 况 . 匹 配除 换行 符外 的任 意字 符 [a-z0-9] 匹 配括 号中 的字 符集 中的 任意 字符 [^a-z0-9] 匹 配任 意不 在括 号中 的字 符集 中的 字符 \d 匹 配数 字 \D 匹 配非 数字 ,同 [^0-9]相同 \w 匹 配字 母和 数字 及 _ \W 匹 配非 字母 和数 字及 _ 字 符类 :空 白字 符 元 字符 /元 符号 匹 配情 况 \0 匹配null 字符 \b 匹 配空 格字 符 \f 匹 配进 纸字 符 \n 匹 配换 行符 \r 匹 配回 车字 符 \t 匹 配制 表符 \s 匹 配空 白字 符、 空格 、制 表符 和换 行符 \S 匹 配非 空白 字符 字 符类 :锚 字符 元 字符 /元 符号 匹 配情 况 ^ 行 首匹 配 $ 行 尾匹 配 \A 只 有匹 配字 符串 开始 处 \b 匹 配单 词边 界, 词在 []内 时无 效 \B 匹 配非 单词 边界 \G 匹 配当 前搜 索的 开始 位置 \Z 匹 配字 符串 结束 处或 行尾 \z 只 匹配 字符 串结 束处 字 符类 :重 复字 符 元 字符 /元 符号 匹 配情 况 x? 匹配0个或1个x x* 匹配0个 或任 意多 个 x x+ 匹 配至 少一 个 x (xyz)+ 匹 配至 少一 个 (xyz) x{m,n} 匹 配最 少 m个 、最 多 n个x 字 符类 :替 代字 符 元 字符 /元 符号 匹 配情 况 this|where|logo 匹配this 或where 或logo 中 任意 一个 字 符类 :记 录字 符 元 字符 /元 符号 匹 配情 况 (string) 用 于反 向引 用的 分组 \1 或$1 匹 配第 一个 分组 中的 内容 \2 或$2 匹 配第 二个 分组 中的 内容 \3 或$3 匹 配第 三个 分组 中的 内容 /*使 用点 元字 符 */ var pattern = /g..gle/; //.匹 配一 个任 意字 符 var str = 'google'; alert(pattern.test(str)); /*重 复匹 配 */ var pattern = /g.*gle/; //.匹配0个 一个 或多 个 var str = 'google'; //*,?,+,{n,m} alert(pattern.test(str)); /*使 用字 符类 匹配 */ var pattern = /g[a-zA-Z_]*gle/; //[a-z]*表 示任 意个 a-z 中 的字 符 var str = 'google'; alert(pattern.test(str)); var pattern = /g[^0-9]*gle/; //[^0-9]*表 示任 意个 非 0-9 的 字符 var str = 'google'; alert(pattern.test(str)); var pattern = /[a-z][A-Z]+/; //[A-Z]+表示A-Z 一 次或 多次 var str = 'gOOGLE'; alert(pattern.test(str)); /*使 用元 符号 匹配 */ var pattern = /g\w*gle/; //\w*匹 配任 意多 个所 有字 母数 字 _ var str = 'google'; alert(pattern.test(str)); var pattern = /google\d*/;//\d*匹 配任 意多 个数 字 var str = 'google444'; alert(pattern.test(str)); var pattern = /\D{7,}/; //\D{7,}匹 配至 少 7个 非数 字 var str = 'google8'; alert(pattern.test(str)); /*使 用锚 元字 符匹 配 */ var pattern = /^google$/; //^从 开头 匹配 , $从 结尾 开始 匹配 var str = 'google'; alert(pattern.test(str)); var pattern = /goo\sgle/; //\s 可 以匹 配到 空格 var str = 'goo gle'; alert(pattern.test(str)); var pattern = /google\b/; //\b 可 以匹 配是 否到 了边 界 var str = 'google'; alert(pattern.test(str)); /*使 用或 模式 匹配 */ var pattern = /google|baidu|bing/;//匹 配三 种其 中一 种字 符串 var str = 'google'; alert(pattern.test(str)); /*使 用分 组模 式匹 配 */ var pattern = /(google){4,8}/; //匹 配分 组里 的字 符串 4-8 次 var str = 'googlegoogle'; alert(pattern.test(str)); var pattern = /8(.*)8/; //获取8..8 之 间的 任意 字符 var str = 'This is 8google8'; str.match(pattern); alert(RegExp.$1); //得 到第 一个 分组 里的 字符 串内 容 var pattern = /8(.*)8/; var str = 'This is 8google8'; var result = str.replace(pattern,'$1'); //得 到替 换的 字符 串输 出 document.write(result); var pattern = /(.*)\s(.*)/; var str = 'google baidu'; var result = str.replace(pattern, '$2 $1');//将 两个 分组 的值 替换 输出 document.write(result); 贪婪 惰性 + +? ??? **? {n} {n}? {n,} {n,}? {n,m} {n,m}? /*关 于贪 婪和 惰性 */ var pattern = /[a-z]+?/; //?号 关闭 了贪 婪匹 配, 只替 换了 第一 个 var str = 'abcdefjhijklmnopqrstuvwxyz'; var result = str.replace(pattern, 'xxx'); alert(result); var pattern = /8(.+?)8/g; //禁 止了 贪婪 ,开 启的 全局 var str = 'This is 8google8, That is 8google8, There is 8google8'; var result = str.replace(pattern,'$1'); document.write(result); var pattern = /8([^8]*)8/g; //另 一种 禁止 贪婪 var str = 'This is 8google8, That is 8google8, There is 8google8'; var result = str.replace(pattern,'$1'); document.write(result); /*使用exec 返 回数 组 */ var pattern = /^[a-z]+\s[0-9]{4}$/i; var str = 'google 2012'; alert(pattern.exec(str)); //返 回整 个字 符串 var pattern = /^[a-z]+/i; //只 匹配 字母 var str = 'google 2012'; alert(pattern.exec(str)); //返回google var pattern = /^([a-z]+)\s([0-9]{4})$/i; //使 用分 组 var str = 'google 2012'; alert(pattern.exec(str)[0]); //google 2012 alert(pattern.exec(str)[1]); //google alert(pattern.exec(str)[2]); //2012 /*捕 获性 分组 和非 捕获 性分 组 */ var pattern = /(\d+)([a-z])/; //捕 获性 分组 var str = '123abc'; alert(pattern.exec(str)); var pattern = /(\d+)(?:[a-z])/; //非 捕获 性分 组 var str = '123abc'; alert(pattern.exec(str)); /*使 用分 组嵌 套 */ var pattern = /(A?(B?(C?)))/;//从 外往 内获 取 var str = 'ABC'; alert(pattern.exec(str)); /*使 用前 瞻捕 获 */ var pattern = /(goo(?=gle))/; //goo 后 面必 须跟 着 gle 才 能捕 获 var str = 'google'; alert(pattern.exec(str)); /*使 用特 殊字 符匹 配 */ var pattern = /\.\[\/b\]/; //特 殊字 符, 用 \符 号转 义即 可 var str = '.[/b]'; alert(pattern.test(str)); /*使 用换 行模 式 */ var pattern = /^\d+/mg; //启 用了 换行 模式 var str = '1.baidu\n2.google\n3.bing'; var result = str.replace(pattern, '#'); alert(result); 四.常 用的 正则 1.检 查邮 政编 码 var pattern = /[1-9][0-9]{5}/; //共6位 数字 ,第 一位 不能 为 0 var str = '224000'; alert(pattern.test(str)); 2.检 查文 件压 缩包 var pattern = /[\w]+\.zip|rar|gz/; //\d\w_表 示所 有数 字和 字母 加下 划线 var str = '123.zip'; //\.表 示匹 配 ., 后面 是一 个选 择 alert(pattern.test(str)); 3.删 除多 余空 格 var pattern = /\s/g; //g 必 须全 局, 才能 全部 匹配 var str = '111 222 333'; var result = str.replace(pattern,''); //把 空格 匹配 成无 空格 alert(result); 4.删 除首 尾空 格 var pattern = /^\s+/; //强 制首 var str = ' goo gle '; var result = str.replace(pattern, ''); pattern = /\s+$/; //强 制尾 result = result.replace(pattern, ''); alert('|' + result + '|'); var pattern = /^\s*(.+?)\s*$/; //使 用了 非贪 婪捕 获 var str = ' google '; alert('|' + pattern.exec(str)[1] + '|'); var pattern = /^\s*(.+?)\s*$/; var str = ' google '; alert('|' + str.replace(pattern, '$1') + '|'); //使 用了 分组 获取 5.简 单的 电子 邮件 验证 var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/; var str = 'yc60.com@gmail.com'; alert(pattern.test(str)); var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/; var str = 'yc60.com@gmail.com'; alert(pattern.test(str)); PS: 以上 是简 单电 子邮 件验 证, 复杂 的要 比这 个复 杂很 多, 大家 可以 搜一 下。 感谢收看本次教程! 本 课程 是由 北风 网 (ibeifeng.com)(ibeifeng.com)(ibeifeng.com)(ibeifeng.com) 瓢城Web Web Web Web 俱 乐部 (yc60.com)(yc60.com)(yc60.com)(yc60.com)联合提 供: 本 次主 讲老 师: 李 炎恢 我 的博 客: hi.baidu.com/hi.baidu.com/hi.baidu.com/hi.baidu.com/李 炎恢 //// 我 的邮 件 :yc60.com@gmail.comyc60.com@gmail.comyc60.com@gmail.comyc60.com@gmail.com
还剩9页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

ccm1314ztt

贡献于2012-08-29

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf