编程 Javascript

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正则表达式基础知识入门

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Dojo之路:如何利用Dojo实现Drag and Drop效果

Apr 10 Javascript

js 通用javascript函数库整理

Aug 14 Javascript

javascript中this做事件参数相关问题解答

Mar 17 Javascript

如何在node的express中使用socket.io

Dec 15 Javascript

EasyUi datagrid 实现表格分页

Feb 10 Javascript

easyui tree带checkbox实现单选的简单实例

Nov 07 Javascript

详解angularJs中自定义directive的数据交互

Jan 13 Javascript

使用vue框架 Ajax获取数据列表并用BootStrap显示出来

Apr 24 Javascript

vue.js源代码core scedule.js学习笔记

Jul 03 Javascript

three.js搭建室内场景教程

Dec 30 Javascript

JS面向对象实现飞机大战

Aug 26 Javascript

JavaScript 原型与原型链详情

Nov 02 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