你对正则表达式有何看法？我猜你会说这太晦涩难懂了，我对它根本不感兴趣 。是的，我曾经和你一样，以为我这辈子都学不会了 。
但我们不能否认它确实很强大，我在工作中经常使用它，今天，我总结了15个非常使用的技巧想与你一起来分享，同时也希望这对你有所帮助 。
那么，我们现在就开始吧 。
1. 格式化货币
我经常需要格式化货币，它需要遵循以下规则：
123456789 => 123,456,789
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'您可以想象如果没有正则表达式我们将如何做到这一点？
2. Trim功能的两种实现方式
有时我们需要去除字符串的前导和尾随空格，使用正则表达式会非常方便，我想与大家分享至少两种方法 。
方式1
const trim1 = (str) => {return str.replace(/^s*|s*$/g, '')}const string = 'hello medium'const noSpaceString = 'hello medium'const trimString = trim1(string)console.log(string)console.log(trimString, trimString === noSpaceString)console.log(string)太好了，我们已经删除了字符串“string”的前导和尾随空格 。
方式2
const trim2 = (str) => {return str.replace(/^s*(.*?)s*$/g, '$1')}const string = 'hello medium'const noSpaceString = 'hello medium'const trimString = trim2(string)console.log(string)console.log(trimString, trimString === noSpaceString)console.log(string)通过第二种方式，我们也达到了目的 。
【15 个常用的正则表达式技巧】3.解析链接上的搜索参数
你一定也经常需要从链接中获取参数吧？
// For example, there is such a link, I hope to get fatfish through getQueryByName('name')// url https://qianlongo.Github.io/vue-demos/dist/index.html?name=fatfish&age=100#/homeconst name = getQueryByName('name') // fatfishconst age = getQueryByName('age') // 100使用正则表达式解决这个问题非常简单 。
const getQueryByName = (name) => {const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(&|$)`)const queryNameMatch = window.location.search.match(queryNameRegex)// Generally, it will be decoded by decodeURIComponentreturn queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''}const name = getQueryByName('name')const age = getQueryByName('age')console.log(name, age) // fatfish, 1004. 驼峰式命名字符串
请将字符串转换为驼峰式大小写，如下所示：
1. foo Bar => fooBar2. foo-bar---- => fooBar3. foo_bar__ => fooBar我的朋友们，没有什么比正则表达式更好的了 。
const camelCase = (string) => {const camelCaseRegex = /[-_s]+(.)?/greturn string.replace(camelCaseRegex, (match, char) => {return char ? char.toUpperCase() : ''})}console.log(camelCase('foo Bar')) // fooBarconsole.log(camelCase('foo-bar--')) // fooBarconsole.log(camelCase('foo_bar__')) // fooBar5. 将字符串的第一个字母转换为大写
请将 hello world 转换为 Hello World 。
const capitalize = (string) => {const capitalizeRegex = /(?:^|s+)w/greturn string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())}console.log(capitalize('hello world')) // Hello Worldconsole.log(capitalize('hello WORLD')) // Hello World6. 转义 HTML
防止 XSS 攻击的方法之一是进行 HTML 转义 。逃逸规则如下：
const escape = (string) => {const escapeMaps = {'&': 'amp','<': 'lt','>': 'gt','"': 'quot',"'": '#39'}// The effect here is the same as that of /[&amp;<> "']/g