正则表达式-初接触

ShariseMo
179 阅读3分钟

作为第一篇刻意学习的博客，我想记录一下最近遇到的问题，第一篇就先写正则表达式吧，这是一个想好好学习很久，却一直觉得遥不可及，无从下手的一个知识点。

segmentfault.com/a/119000001…

遇到的问题

  • input 验证：限制只能输入数字或字母
  • filter 筛选：制定一定的规则，返回查询结果
  • 编辑器批量替换：有时候写代码的过程中需求变化了，需要替换一定格式的代码

什么是正则表达式

  • 官方解释：正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换
  • 语法：/正则表达式主体/修饰符(可选)   eg： var patt = /hello-world/i

    正则表达式分为表达式主体部分和修饰符

demo

//检索是否含有中文的正则表达式
function isChineseChar(str){   
   var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
   if(reg.test(str)){
        str = ''
        alert('此处不可以输入中文字符，请重新输入')
    }
}

//使用js正则表达式匹配中文，需要了解中文字符在unicode编码中所处的区间。这样才能够了解表达式的匹配原
理。/** 首先在正则表达式中使用 Unicode，必须使用\u开头，接着是字符编码的四位16进制表现形式简单匹配
中文方法: /[^\u0000-\u00FF]/ (匹配非单字节字符 )  
具体的匹配中文及字符方法：/[\u4E00-\u9FA5\uF900-\uFA2D]/
说明： u4e00-u9fbf :  unicode CJK(中日韩)统一表意字符。u9fa5后至u9fbf为空
uF900-uFAFF :  为unicode  CJK 兼容象形文字  。uFA2D后至uFAFF为空
具体可参考unicode编码表：http://www.nengcha.com/code/unicode/class/

filter demo

    shopLeft1() {
      let _this = this
      let _channel = ',' + this.channel + ','
      return _this.shopLeft.filter(function(item) {
        item.store_channel_id = ',' + item.store_channel_id + ','
        return (
          item.store_channel_id.toString().indexOf(_channel) !== -1 &&
          (item.store_name.indexOf(_this.keyword1) !== -1 ||
            item.store_no
              .toLowerCase()
              .indexOf(_this.keyword1.toLowerCase()) !== -1)
        )
      })
    }
//在vue项目中，可以把这个放在watch中，监视到shopLeft1 的值变化之后会直接更新数据，不用做重新赋值
操作

filter 函数详解

筛选出所有大于10的值


filter 函数 使用特定的函数测试数组中所有的元素，并将符合规则的元素生成一个新的数组，不会影响原数组

/*
    filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

    filter()基本语法：
       arr.filter(callback[, thisArg])

 　　filter()参数介绍：
   　　 参数名    说明
   　　 callback   用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)
    　　返回true表示保留该元素（通过测试），false则不保留。
    　　thisArg    可选。执行 callback 时的用于 this 的值。

　　filter()用法说明：

　　　　filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 
等价于 true 的值 的元素创建一个新数组。
　　　　callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。
那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

　　　　callback 被调用时传入三个参数：

　　　　元素的值
　　　　元素的索引
　　　　被遍历的数组
　　　　如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，
callback 的this 值在非严格模式下将是全局对象，严格模式下为 undefined。

　　　　filter 不会改变原数组。

　　　　filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数
组中的元素不会被 filter 遍历到。
　　　　如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除
或从来未被赋值的元素不会被遍历到。

*/


avatar
文章
阅读
粉丝