专栏首页前端下午茶JS 活学活用正则表达式

JS 活学活用正则表达式

JS RegExp Code Base

记录一些项目中用到的正则工具,将持续更新...

如果对JS中的正则不太了解,可以参考一下JS 中正则表达式必知必会

1. 字符串操作

去除字符串两边的空格 trim

String.prototype.trim = function() {
  return this.replace(/(^\s+)\|(\s+$)/g, '')
}

HTML编码,对< / > " & \等字符转义,避免XSS攻击

function htmlEncode(str) {
  return str.replace(/[\<\>\"\'\&]/g, function(rs) {
    switch (rs) {
      case '<':
        return '&lt;'
      case '>':
        return '&gt;'
      case '&':
        return '&amp;'
      case ''':
        return '&apos;'
      case '"':
        return '&quot;'
    }
  })
}

找出重复最多的字符

let str = 'asss23sjdssskssa7lsssdkjsssdss'
const arr = str.split(/\s*/)              // 把字符串转换为数组
const str2 = arr.sort().join('')              // 首先进行排序,这样结果会把相同的字符放在一起,然后再转换为字符串
let value = ''
let index = 0
str2.replace(/(\w)\1*/g, function($0, $1) {         // 匹配字符
  if (index < $0.length) {
    index = $0.length              // index是出现次数
    value = $1                  // value是对应字符
  }
})
console.log(`最多的字符: ${value} ,重复的次数: ${index}`)          // s 17

数字格式化,1234567890 -> 1,234,567,890

下面简单分析下正则/\B(?=(\d{3})+(?!\d))/g

  1. /\B(?=(\d{3})+(?!\d))/g:正则匹配非单词边界\B,边界后面必须跟着(\d{3})+(?!\d)
  2. (\d{3})+:必须是1个或多个的3个连续数字
  3. (?!\d):第2步中的3个数字不允许后面跟着数字
  4. (\d{3})+(?!\d):所以匹配的边界后面必须跟着3*n(n>=1)的数字

最终把匹配到的所有边界换成,即可

const numFormat = str => str.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

手机号中间四位换*

手机号中间4位数换成*

const validateMobile = str => /^[1][0-9]{10}$/.test(str) && str.replace(/(\d{3})(\d{4})(\d{4})/, (rs, $1, $2, $3) => `${$1}****${$3}`)

取URL中query到一个对象中

function getUrlParam(str) {
  const result = {}
  const valid = /(https?|ftp):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.exec(str)
  if (!valid) return
  const [rs, $1, $2, $3] = valid
  $3.match(/[a-zA-Z_]+=[^=&?]*/g).forEach(val => val.replace(/^(\w+)=(\w*)$/, ($0, $1, $2) => {
        result[$1] = $2
      })
  )
  return result
}

getUrlParam('https://www.baidu.com?name=jawil&age=23&d=')         // {name: "jawil", age: "23", d: ""}

2. 验证

用于验证时,通常需要在前后分别加上^$\b,以匹配整个待验证字符串

常用正则验证

function checkStr(str, type) {
  switch (type) {
    case 'phone': //手机号码
      return /^1\d{10}$/.test(str)
    case 'tel': // 座机
      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)
    case 'card': // 身份证
      return /^\d{15}|\d{18}$/.test(str)
    case 'pwd': // 密码以字母开头,长度在6~18之间,只能包含字母、数字和下划线
      return /^[a-zA-Z]\w{5,17}$/.test(str)
    case 'postal': // 邮政编码
      return /[1-9]\d{5}(?!\d)/.test(str)
    case 'QQ': // QQ号 5-11位数字
      return /^[1-9]\d{4,10}$/.test(str)
    case 'email': // 邮箱
      return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
    case 'money': // 金额(小数点2位)
      return /^\d*(?:\.\d{0,2})?$/.test(str)
    case 'URL': // 网址
      return /(https?|ftp):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
    case 'IP': // IP
      return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str)
    case 'day': // 一个月的31天 01-09和1~31
      return /^((0?[1-9])|(([12])[0-9])|30|31)$/.test(str)
    case 'month': // 一年的12个月 01-09和1-12
      return /^(0?[1-9]|1[0-2])$/.test(str)
    case 'date': // 日期时间
      return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
    case 'integer': // 整数 正整数或负整数
      return /^-?\d+$/.test(str)
    case 'decimal': // 小数
      return /^(-?\d+)(\.\d+)?$/.test(str)
    case 'english': // 英文
      return /^[a-zA-Z]+$/.test(str)
    case 'chinese': // 中文
      return /^[\u4E00-\u9FA5]+$/.test(str)
    case 'cname': // 中文姓名 2-4位汉字
      return /^[\u4E00-\u9FA5]{2,4}$/.test(str)
    case 'lower': // 小写
      return /^[a-z]+$/.test(str)
    case 'upper': // 大写
      return /^[A-Z]+$/.test(str)
    case 'HTML': // HTML标记
      return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str)
    default:
      throw new Error('检验出错 in function checkStr')
  }
}

验证是否是合法URL

function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考: JavaScript正则进阶之路——活学妙用奇淫正则表达式 js正则验证方法大全 javascript 总结(RegExp篇)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js正则表达式

    用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false

    星辉
  • js正则表达式

    河岸飞流
  • js正则表达式(一)

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • js正则表达式简单应用

    剽悍一小兔
  • 【正则】223-JS常用正则表达式备忘录

    正则表达式或“regex”用于匹配字符串的各个部分,下面是作者创建正则表达式的备忘单,供大家学习参考。

    pingan8787
  • JS常用正则表达式备忘录

    正则表达式或“regex”用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单。

    Fundebug
  • 正则表达式在js中的使用

    test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。

    清出于兰
  • JS正则表达式入门篇

    兰翠 就职于爱屋吉屋,出身后端现混迹于前端 正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或...

    前端黑板报
  • 前端day21-JS正则表达式

    1.字符类: /[abc]/ 含义:只要字符串中有 a 或者有 b 或者有 c 就满足条件

    帅的一麻皮
  • js中的正则表达式(1)

    对于正则,著称火星文字,见名知意主要它晦涩难懂,一直以来,看到它总是怕怕的,在平时,也只是简单的用用,其主要是靠搜,还有就是厚着脸皮求助各路大神了,遇到稍复杂些...

    itclanCoder
  • js中的正则表达式(2)

    紧接着上次的js中的正则表达式(1),这一文搁在那很久了的,本文为初学者学习笔记心得,适用我这种小白,并不是什么高大尚的内容,您将在本文中看到,如何实现重复字符...

    itclanCoder
  • JS正则表达式常用函数汇总

    写代码时,尤其是为表单添加验证时,经常会用到正则表达式,这时候,一堆相关的函数就浮现出来了,由于比较类似,所以经常不能快速选择最合适的函数,对于懒癌前端,更得马...

    企鹅号小编
  • 知识总结:常用正则表达式正则表达式

    正则表达式 常用正则表达式大全!(例如:匹配中文、匹配html) 匹配中文字符的正则表达式: [u4e00-u9fa5]  评注:匹配中文还真是个头疼的事,有...

    牛客网
  • JS正则表达式验证大全

    <script type="text/javascript"> function validate(){ var reg = n...

    I Tech You_我教你
  • 《JS正则表达式教程》汇总

    正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表通常被用...

    程序猿DD
  • js正则表达式替换空格

    例如,比如说要将1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed这种格式的uuid字符串中的-字符使用空格替换,可以使用下面的代码:

    ccf19881030
  • Python——四则表达式(正则表达式的应用)

    依稀记得,n年前按键精灵等级考试时的题目:写一个四则运算的代码。当时其实离六级认证水平还有一定差距,愣是写了半个下午,才把不带括号的加减乘除给做出来(20分的题...

    Ed_Frey
  • 常用正则表达式

    一, 1.^\d+$    //匹配非负整数(正整数 + 0) ---^:以数字开头 +:之前紧邻出现的一次或多次 2.[0-9]*[1-9][0-9]*$...

    用户1197315
  • 常用正则表达式

      该文持续性的收集工作中常用到的正则表达式,基本都是拿来即用,如有纰漏,烦请指出。

    用户1615728

扫码关注云+社区

领取腾讯云代金券