正则什么的，你让我写，我会难受，你让我用，真香！

继续创作，加速成长！这是我参与「日新方案 6 月更文应战」的第23天，点击查看活动概况

---

哈哈，如题所说，对于很多人来说写正则便是”兰德里的折磨“吧。假如https和http的区别不是http代理有需求频频要用，底子就不会想着学它。(?!^)(?=(\d{3})+ 这种就html是什么意思跟外星文相同。

但你要说是用它，它又真的好用。用来做html做校验、做做字符串提取、做做变形http 302啥的，真不错。最好的便是能 C爬虫技术抓取网站数据V 过来直接用~

本篇带来 15 个正则使用场景，按需讨取，收藏恒等于学会！！

千分位格局化

在项目中常常碰到关于变量与函数钱银金额的页面显示，为了让金额的显示更为人性化与规范化，需求加入钱银格局化战略。也便是所谓的数字千分位格局化。

1. 123456789=>123,GitHub456,789
2. 123456789.123=>123,456,789.123

const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\d{3})+${money.includes('.') ? '\.' : '$'})`, 'g'), ',')  
}
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

想想假如不是用正则，还能够用什么更高雅的办法完成它？

解析链接参数

你必定常常遇到这样的需求，要拿到 url 的参数的值，像这样：

// url <https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home>
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100

经过正则，变量的定义简单就能完成 ge变量与函数tQueryByName 函数：

const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(&|$)`)
  const queryNameMatch = window.location.search.match(queryNameRegex)
  // Generally, it will be decoded by decodeURIComponent
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''
}
const name = getQueryByName('name')
const age = getQueryByName('age')
console.log(name, age) // fatfish, 100

驼峰字符串

JS 变量最佳是驼峰风格的写法，怎样http 302将相似以下的其它声明风格写法转化为驼峰写法？

1. foo Bar => fooBar
2. foo-bar---- => fooBar
3. foo_bar__ => fooBar

正则表达式分分钟教爬虫犯法吗做人：

const camelCase = (string) => {
  const camelCaseRegex = /[-_s]+(.)?/g
  return string.replace(camelCaseRegex, (match, char) => {
    return char ? char.toUpperCase() : ''
  })
}
console.log(camelCase('foo Bar')) // fooBar
console.log(camelCase('foo-bar--')) // fooBar
console.log(camelCase('foo_bar__')) // fooBar

小写转大写

这个需求常见，无需多言，用就完事儿啦：

const capitalize = (string) => {
  const capitalizeRegex = /(?:^|s+)w/g
  return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())
}
console.log(capitalize('hello world')) // Hello World
console.log(capitalize('hello WORLD')) // Hello World

完成 trim()

trim() 办法用于删去字符串的头尾空白符，用正则能够模拟完成 trim：

const trim1 = (str) => {
  return str.replace(/^s*|s*$/g, '') // 或许 str.replace(/^s*(.*?)s*$/g, '$1')
}
const string = '   hello medium   '
const noSpaceString = 'hello medium'
const trimString = trim1(string)
console.log(string)
console.log(trimString, trimString === noSpaceString) // hello medium true
console.log(string)

tri爬虫pythonm() 办法不会改变原始HTML字符串，同样，自定义完成的 trim1 也不会改变原始字符串；

HTML 转义

避免 XSS 攻击爬虫软件是干什么的的办法之一是进行 HTML 转义，符号对应的转义字符：

正则处理如下：

const escape = (string) => {
  const escapeMaps = {
    '&': 'amp',
    '<': 'lt',
    '>': 'gt',
    '"': 'quot',
    "'": '#39'
  }
  // The effect here is the same as that of /[&amp;<> "']/g
  const escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join('')}]`, 'g')
  return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`)
}
console.log(escape(`
  <div>
    <p>hello world</p>
  </div>
`))
/*
&lt;div&gt;
  &lt;p&gt;hello world&lt;/p&gt;
&lt;/div&gt;
*/

HTML 反转义

有了正向的转义，就有反向的逆转义，操作如下：

const unescape = (string) => {
  const unescapeMaps = {
    'amp': '&',
    'lt': '<',
    'gt': '>',
    'quot': '"',
    '#39': "'"
  }
  const unescapeRegexp = /&([^;]+);/g
  return string.replace(unescapeRegexp, (match, unescapeKey) => {
    return unescapeMaps[ unescapeKey ] || match
  })
}
console.log(unescape(`
  &lt;div&gt;
    &lt;p&gt;hello world&lt;/p&gt;
  &lt;/div&gt;
`))
/*
<div>
  <p>hello world</p>
</div>
*/

校验变量与函数 24 小时制

处理时刻，常常要用到正则，比方常见的：校验时刻格局是否是合法的 24 小时制：

const check24TimeRegexp = /^(?:(?:0?|1)d|2[0-3]):(?:0?|[1-5])d$/
console.log(check24TimeRegexp.test('01:14')) // true
console.log(check24TimeRegexp.test('23:59')) // true
console.log(check24TimeRegexp.test('23:60')) // false
console.log(check24TimeRegexp.test('1:14')) // true
console.log(check24TimeRegexp.test('1:1')) // true

校验日期格局

常见的日期格局html5有：yyyy-mm-dd, yyyy.mm.dd, yyyy/mm/dd 这 3 种，假如有符号乱用的状况，比方2021.08/22，这样就不github直播平台永久回家是合法的日期格局，咱们能够经过正则来校验判别：

const checkDateRegexp = /^d{4}([-./])(?:0[1-9]|1[0-2])1(?:0[1-9]|[12]d|3[01])$/
console.log(checkDateRegexp.test('2021-08-22')) // true
console.log(checkDateRegexp.test('2021/08/22')) // true
console.log(checkDateRegexp.test('2021.08.22')) // true
console.log(checkDateRegexp.test('2021.08/22')) // false
console.log(checkDateRegexp.test('2021/08-22')) // false

匹配色彩值

在字符串内匹配出 16 进制的色彩值：

const matchColorRegex = /#(?:[da-fA-F]{6}|[da-fA-F]{3})/g
const colorString = '#12f3a1 #ffBabd #FFF #123 #586'
console.log(colorString.match(matchColorRegex))
// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]

判别 HTTPS/HTTP

这个需求也是很常见的，判爬虫python入门别请求协议是否是 HTTPS/HTTP

const checkProtocol = /^https?:/
console.log(checkProtocol.test('https://medium.com/')) // true
console.log(checkProtocol.test('http://medium.com/')) // true
console.log(checkProtocol.test('//medium.com/')) // false

校验版本变量的定义号

版本号必须采用 x.y.变量的定义z 格局，其间 XYZ 至少为一位，咱们能够用正则来校验：

// x.y.z
const versionRegexp = /^(?:d+.){2}d+$/
console.log(versionRegexp.test('1.1.1'))
console.log(versionRegexp.test('1.000.1'))
console.log(versionRegexp.test('1.000.1.1'))

获爬虫代码取网页 img 地址

这个需求或许爬虫用的比较多，用正则获取当前网页一切图片的地址。在控制台打印试试，太好用爬虫技术抓取网站数据了~~

const matchImgs = (sHtml) => {
  const imgUrlRegex = /<img[^>]+src="((?:https?:)?//[^"]+)"[^>]*?>/gi
  let matchImgUrls = []
  sHtml.replace(imgUrlRegex, (match, $1) => {
    $1 && matchImgUrls.push($1)
  })
  return matchImgUrls
}
console.log(matchImgs(document.body.innerHTML))

格局化电话号码

这个需求也是常html见的一匹，用就完事了：

let mobile = '18379836654'
let mobileReg = /(?=(d{4})+$)/g 
console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654

觉得不错的话html标签属性大全，给个赞吧，以后继续弥补~~

O爬虫是什么K，以上便是本篇共享。点赞重视评论，为好文html是什么意思助力

我是安东尼 100 万阅读量人气前端技术博主 INFPgithub开放私库 写作品格坚持 1000 日更文 ✍ 重视我，陪你一起度过绵长编程年月