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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 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 采集程序原理分析篇
2010/03/05 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
详解php中反射的应用
2016/03/15 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python中format()函数的简单使用教程
2018/03/14 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
JAVA代码查错题
2014/10/10 面试题
企业出纳岗位职责
2014/03/12 职场文书
食品业务员岗位职责
2014/03/18 职场文书
2014年幼师工作总结
2014/11/22 职场文书
业务员岗位职责范本
2015/04/03 职场文书