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中定义对象类别
Dec 22 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
Validform表单验证总结篇
Oct 31 Javascript
javascript学习之json入门
Dec 22 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
webpack常用构建优化策略小结
Nov 21 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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 Directory 函数的详解
2013/03/07 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
广告学毕业生求职信
2014/01/30 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript