javascript正则表达式基础知识入门


Posted in Javascript onApril 20, 2015

正则表达式的好处到底在哪里呢,下面我们先进行个了解:
我们用js中处理字符串的方法,写出取出字符串中数字的函数:

var str='dgh6a567sdo23ujaloo932';
   function getNumber(obj){
     var arr=[];
     for (var i = 0; i < obj.length; i++) {
       if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
           arr.push(obj.charAt(i));
         }
     }
     return arr;
   };
   console.log(getNumber(str));  //["6", "5", "6", "7", "2", "3", "9", "3", "2"]

上面的方法我们取出了字符串中的数字,但是我们不满意,我们需要的是['6','567','23','932']的形式,对函数进行改造:

function getNumber(obj){
    var arr=[];
    var temp='';
    for (var i = 0; i < obj.length; i++) {
      if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
          temp+=obj.charAt(i);//现将相邻的数字连接起来
        }
        else{ //每当连接的数字断开时,就在这执行
          if (temp) {
            arr.push(temp);
            temp='';
          }
        };
    }
    if (temp) { //这里的作用是为了显示最后数字的,原因不想解释
            arr.push(temp);
            temp='';
          }
    return arr;
  };

那我们用正则表达式的方式来解决这个函数实现的功能:

function getNumber2(obj){
    var arr=[];
    var re=/\d+/g;
    arr.push(obj.match(re));
    return arr;
  };

完整的看看程序的运行结果吧:

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'>
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6a567sdo23ujaloo932';
  /*function getNumber(obj){
    var arr=[];
    for (var i = 0; i < obj.length; i++) {
      if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
          arr.push(obj.charAt(i));
        }
    }
    return arr;
  };*/
  function getNumber(obj){
    var arr=[];
    var temp='';
    for (var i = 0; i < obj.length; i++) {
      if (obj.charAt(i)>='0'&&obj.charAt(i)<='9'){
          temp+=obj.charAt(i);//现将相邻的数字连接起来
        }
        else{ //每当连接的数字断开时,就在这执行
          if (temp) {
            arr.push(temp);
            temp='';
          }
        };
    }
    if (temp) { //这里的作用是为了显示最后数字的,原因不想解释
            arr.push(temp);
            temp='';
          }
    return arr;
  };
  function getNumber2(obj){
    var arr=[];
    var re=/\d+/g;
    arr.push(obj.match(re));
    return arr;
  };
  console.log(getNumber(str));
  console.log(getNumber2(str)); 
};
</script>
<body>
</body>
</html>

从上面的例子我们可以看出来,正则表达式的方法有着同样的效果,但是代码更加简短,更加高效,这就是正则的好处啊
正则是为了更高效的处理字符串而产生的,和字符串处理方法一样,只是更加高效、简洁(正则只可以处理字符串)

下面我们来系统的学习一下,正则的几个常用的方法:

在这之前说一下正则的写法,正则和其他对象array()、object()、Date()等都一样,都有初始化的方式
var re=/这里面要写匹配的东西,不写的话就是注视符号了/; //这样的就是正则对象的简单创建,后面文章我都是直接用它来代替的
var re=new RegExp(); //这样的创建方式也可以的,大家懂得,只是和简写不同的是参数传递有点不一样

(1)test

含义:正则去匹配字符串,当匹配成功返回true,反之,返回false;
语法:re.test(字符串);
先说点转义字符吧 :
/s空格 /S非空格 /d数字 /D非数字 /w字符(字母、数字、下划线) /W非字符
举个例子:判断一个字符串是否都是数字

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6a567sdo23ujaloo932';
  var str2='123456';
  function allNumber(obj){
    var re=/\D/;//定义正则对象匹配非数字,只要有不是数字的就是匹配结束返回结果
    if (re.test(obj)) {
      alert('不全是数字');
    }
    else{
      alert('全是数字');
    };
  };
  allNumber(str);
  allNumber(str2);

};
</script>
<body>
</body>
</html>

(2)search

含义:正则去匹配字符串,当匹配成功返回匹配成功的位置,反之,返回-1;和字符串处理方法中的indexof()功能一样
语法:字符串.search(re);
[color=Red]注意:正则中默认是区分大小写的,要想让其不区分大小写的就是加标识i;[/color]
例子,不区分大小写的去正则匹配字符串中某个字符

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6b567sdo23ujaloo932';
  function searchStr(obj){
    var re=/B/i;//定义正则对象匹配b字符,不区分大小写
    alert(obj.search(re));  
  };
  searchStr(str);
};
</script>
<body>
</body>
</html>

(3)match

含义:正则去匹配字符串,当匹配成功返回匹配成功的数组,反之,返回Null
语法:字符串.match(re);
[color=Red]注意:正则中默认是只要是匹配成功就立刻结束返回相应的值,不会继续匹配。若想查找全部就需要加表示g(全局匹配)[/color]
例子:匹配字符串中的连续数字并将其存入一个数组中(连续的数字作为数组用的一项)

程序中的“+”是匹配至少出现一次,为什么要这样做呢?
前面我们提过“正则中默认是只要是匹配成功就立刻结束返回相应的值”,那么在字符串中匹配到一个数字时就会结束,将一个数字返回数组,这时候我们需要的是用g来让它匹配每一个元素。
有没有发现连续的数字没有确定的个数,用“+”就可以满足动态的数字个数。

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var str='dgh6b567sdo23ujaloo932';
  function searchStr1(obj){
    var re=/\d/;  
    return obj.match(re);
  };
  function searchStr2(obj){
    var re=/\d/g;  
    return obj.match(re);
  };
  function searchStr3(obj){
    var re=/\d\d/g;//全局匹配2位数  
    return obj.match(re);
  };
  function searchStr4(obj){
    var re=/\d+/g;  
    return obj.match(re);
  };
  console.log(searchStr1(str));
  console.log(searchStr2(str));
  console.log(searchStr3(str));
  console.log(searchStr4(str));

};
</script>
<body>
</body>
</html>

(4)replace

含义:正则去匹配字符串,当匹配成功的字符串被新的字符串所替代
语法:字符串.replace(re);
例子:将字符串中的所有的a都替换成b

<!DOCTYPE>
<html>
<head>
 <meta charset='utf-8'> 
 <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
 var str='daah6b5a7sdo23ujaloo932';
 function replaceStr(obj){
  var re=/a/g; //全局匹配a
  return obj.replace(re,'b');
 };
 console.log(replaceStr(str));
};
</script>
<body>
</body>
</html>

暂时写到这里后续跟新。。。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
javascript实现密码强度显示
Mar 18 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 #Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 #Javascript
JS解析XML文件和XML字符串详解
Apr 17 #Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 #Javascript
js获取当前日期时间及其它操作汇总
Apr 17 #Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 #Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 #Javascript
You might like
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
parentElement,srcElement的使用小结
2014/01/13 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
vue实现简单图片上传
2020/06/30 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python循环语句中else的用法总结
2016/09/11 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python下载库的步骤方法
2019/10/12 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
医院标语大全
2014/06/23 职场文书
2015年党性分析材料
2014/12/19 职场文书
西柏坡导游词
2015/02/05 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
Golang 链表的学习和使用
2022/04/19 Golang