A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

  实验:JS中的正则表达式应用收藏本文作者:强官涛 类型:Web前端 类别:实验 日期:2018-10-29 阅读:470 次 消耗积分:0 分正则表达式简介
  正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
  正则表达式并不是某一门编程语言专用,它是一项独立于任何编程语言的一套文本搜索和匹配规则,目前是所有的程序设计语言都提供了对正则表达式标准规则的支持而已。
  所以要学习好正则表达式,我们重点其实并不在于在某个程序设计语言中怎么调用,用什么函数,传递什么参数,而是首先要完全理解正则表达式的语法规则。
  正则表达式语法
  标准的正则表达式的语法规则归类如下:
  1.方括号:
  方括号用于查找某个范围内的字符,如表9-5所示。
  表9- 5 正则表达式的方括号用法
  表达式描述
  [abc]查找方括号之间的任何字符。
  [^abc]查找任何不在方括号之间的字符。
  [0-9]查找任何从 0 至 9 的数字。
  [a-z]查找任何从小写 a 到小写 z 的字符。
  [A-Z]查找任何从大写 A 到大写 Z 的字符。
  [A-z]查找任何从大写 A 到小写 z 的字符。
  [adgk]查找给定集合内的任何字符。
  [^adgk]查找给定集合外的任何字符。
  (red|blue|green)查找任何指定的选项,red或blue或green。
  2.元字符
  元字符(Metacharacter)是拥有特殊含义的字符,如表9-6所示。
  表9-6 正则表达式的元字符
  元字符描述
  .查找单个字符,除了换行和行结束符。
  \w查找单词字符。
  \W查找非单词字符。
  \d查找数字。
  \D查找非数字字符。
  \s查找空白字符。
  \S查找非空白字符。
  \b匹配单词边界。
  \B匹配非单词边界。
  \0查找 NUL 字符。
  \n查找换行符。
  \f查找换页符。
  \r查找回车符。
  \t查找制表符。
  \v查找垂直制表符。
  \xxx查找以八进制数 xxx 规定的字符。
  \xdd查找以十六进制数 dd 规定的字符。
  \uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。
  3.量词:
  量词主要解决匹配数量的问题,如表9-7所示。
  表9-7 正则表达式中的量词
  量词描述
  n+匹配任何包含至少一个 n 的字符串。
  n*匹配任何包含零个或多个 n 的字符串。
  n?匹配任何包含零个或一个 n 的字符串。
  n{X}匹配包含 X 个 n 的序列的字符串。
  n{X,Y}匹配包含 X 或 Y 个 n 的序列的字符串。
  n{X,}匹配包含至少 X 个 n 的序列的字符串。
  n$匹配任何结尾为 n 的字符串。
  ^n匹配任何开头为 n 的字符串。
  ?=n匹配任何其后紧接指定字符串 n 的字符串。
  ?!n匹配任何其后没有紧接指定字符串 n 的字符串。
  JS的RegExp对象
  在JavaScript中,主要使用RegExp对象来处理正则表达式。RegExp 对象属性,如表9-8所示。
  表9- 8 RegExp对象的属性
  属性描述
  globalRegExp 对象是否具有标志 g。
  ignoreCaseRegExp 对象是否具有标志 i。
  lastIndex一个整数,标示开始下一次匹配的字符位置。
  multilineRegExp 对象是否具有标志 m。
  source正则表达式的源文本。
  RegExp 对象方法,如表9-9所示。
  表9- 9 RegExp对象的方法
  方法描述
  compile编译正则表达式。
  exec检索字符串中指定的值。返回找到的值,并确定其位置。
  test检索字符串中指定的值。返回 true 或 false。
  另外,字符串中的几个方法也同样支持正则表达式,如表9-10所示。
  表9- 10 支持正则表达式的字符串方法
  方法描述
  search检索与正则表达式相匹配的值。
  match找到一个或多个正则表达式的匹配。
  replace替换与正则表达式匹配的子串。
  split把字符串分割为字符串数组。
  接下来,我们来看看关于JavaScript中处理正则表达式的对象RegExp的具体实例:
  实例一:检查用户的输入是否为纯数字:
[JavaScript] 纯文本查看 复制代码
<script>
    var content = prompt("请输入你的测试内容:");
    var re = new RegExp("\\d+");   // 匹配纯数字1次或多次
    var result = re.test(content);
    if (result) {
        document.write("这是一个有效的数字.");
    }
    else {
        document.write("这不是一个有效的数字.");
    }
</script>

  当然,由于我们是对一个字符串进行检查,所以我们也可以使用字符串的match方法来处理。

  实例二:检查用户的输入是否为一个有效的电话号码:
[JavaScript] 纯文本查看 复制代码
<script>
    var content = prompt("请输入你的手机号码:");
    var re = new RegExp("1[3578]\\d{9}");   // 匹配纯数字1次或多次
    var result = re.test(content);
    if (result) {
        document.write("这是一个有效的电话.");
    }
    else {
        document.write("这不是一个有效的电话.");
    }
</script>

  实例三:提取文本中的所有7位数字的号码:
[JavaScript] 纯文本查看 复制代码
<script>
    var text = "文本内容,1234567,花费3456230元费用,来完成34345645个计划。";
    var pattern = new RegExp("\\d{7}", "g");
    while ((result = pattern.exec(text)) != null)  {
        document.write(result);
        document.write(pattern.lastIndex);
    }
</script>

  常见的正则表达式可以处理几乎所有的用户输入的验证问题,欲了解更多正则表达式,可访问传智播客官网。



  传智的web前端培训课程一直紧随市场发展脚步,实时更新前沿、深度、覆盖面广的前端课程。
  传智全新升级的前端与移动开发课程新增了大热的小程序+小游戏、人脸识别、机器学习、大数据可视化等前沿技术,还加入了前所未有的全终端大型项目,让学员通过一个大型项目掌握从需求到开发再到上线部署的各项技能,为学员高薪就业增加砝码。
  更多的相关web前端培训课程请访问:http://www.itcast.cn/web/

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马