常用正则

·  阅读 364
常用正则

概述

前端正则不常用,但也不可或缺,下面总结了下本人开发过程中前端常用的正则跟大家分享。

具体使用场景

场景1:提取最后一个符合条件的目标字符串

  • 示例1:提取最后一个()括号内的内容
// 返回结果10.202.2.39
'(123)auth-console-(234)-consoletest(10.202.2.39)'.replace(/.*((.*)).*/, "$1")
复制代码

场景2:提取第一个符合条件的目标字符串(知识点:*?代表忽略优先量词)

  • 示例1:提取第一个()括号内的内容
// 返回结果123
'(123)auth-webconsole01-(234)-webconsoletest(10.202.2.39)'.replace(/.*?((.*?)).*/, "$1")
复制代码
  • 示例2:提取第一个::冒号中间的内容
// 返回结果permission-center_resource_policies
"atlas:permission-center_resource_policies:*:action:kk".replace(/.*?:(.*?):.*/, "$1")
复制代码

场景3:提取指定字符,例如在一段字符串中匹配到项目的代号

  • 提取固定格式'/console/xxxx/idc', 提取内容xxx
// 返回baseui
'/console/baseui/idc'.replace(/\/console\/(.*?)\/.*/, "$1")
复制代码

场景4:分割字符串

  • 分割成 svn-svn://svn-test19.gz.netease.com/svn/branches/b1 和 163两个字符串
// 返回分割后的数组
'svn-svn://svn-test19.gz.netease.com/svn/branches/b1-163'.match(/(.*)-(.*)/)
复制代码

场景5:替换字符串

  • 要求把字符串svn-svn://svn-test19.gz.netease.com/svn/branches/b1-163 前面的svn-去掉
// 返回svn://svn-test19.gz.netease.com/svn/branches/b1
'svn-svn://svn-test19.gz.netease.com/svn/branches/b1'.replace(/(svn-)/, '')
复制代码
  • 字符串'xiao || mei || yu && li || wu && oi',要求将|| &&字符两边的字符串替换成标签

如:<sapn>xiao</span><sapn>mei</sapn><sapn>yu</span><span>li</span><span>wu</span><span>oi</span>

let testStr = 'xiao || mei || yu && li || wu && oi'.replace(/(\|\|)|(\&\&)/g, '</span><span>')
let latestStr = `<span>${testStr}</span>`
console.log(latestStr)
复制代码
  • 提取字符串中的url链接并替换成<a href="url链接" target="_blank" rel="noreferrer">url链接</a>形式
// 提取替换文本中的http链接
function changeUrl(content) {
  const expression = /(ftp|https?):\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/g
  const regex = new RegExp(expression)
  return content.replace(
    regex,
    '<a href="$&" target="_blank" rel="noreferrer">$&</a>'
  )
}
const targetStr = changeUrl('测试打开目标链接https://music.163.com/欢迎')

console.log(targetStr)
复制代码
分类:
前端
标签: