20 мощных и полезных регулярных выражений, которые должен освоить каждый старший веб-инженер

Регулярные выражения стоит изучить каждому фронтенд-инженеру.

1. Форматирование денег

Мне часто нужно форматировать деньги на работе, и использование регулярных выражений делает это очень простым.

const formatPrice = (price) => {
  const regexp = new RegExp(`(?!^)(?=(\\d{3})+${price.includes('.') ? '\\.' : '$'})`, 'g') 
  return price.replace(regexp, ',')
}

formatPrice('123') // 123
formatPrice('1234') // 1,234
formatPrice('123456') // 123,456
formatPrice('123456789') // 123,456,789
formatPrice('123456789.123') // 123,456,789.123

Друг мой, у тебя есть еще идеи?

Использование Intl.NumberFormat — мой любимый способ сделать это.

const format = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
})

console.log(format.format(123456789.123)) // $123,456,789.12

Есть более чем один способ исправить это! У меня есть еще один способ сделать меня счастливым.

const amount = 1234567.89
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })

console.log(formatter.format(amount)) // $1,234,567.89

Ого, зачем мне учить регулярные выражения? Это выглядит так сложно! Я потерял уверенность.

Успокойтесь, друг мой, вы увидите магию регулярных выражений.

2. Два способа удаления пробелов из строки

Что мне делать, если я хочу удалить начальные и конечные пробелы из строки?

console.log('   medium   '.trim())

Это довольно просто, верно? Конечно, используя регулярные выражения, у нас есть как минимум два способа сделать это.

1. Решение 1

const trim = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}

trim('  medium ') // 'medium'

2. Решение 2

const trim = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1')    
}

trim('  medium ') // 'medium'

3. Экранированный HTML

Одним из способов предотвращения XSS-атак является экранирование HTML. Правила экранирования следующие, и соответствующие символы должны быть преобразованы в эквивалентные объекты. И анти-экранирование заключается в преобразовании сбежавшего объекта в соответствующий символ.

const escape = (string) => {
  const escapeMaps = {
    '&': 'amp',
    '<': 'lt',
    '>': 'gt',
    '"': 'quot',
    "'": '#39'
  }
  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;
*/

4. Неэкранированный 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>
*/

5. Камелизируйте веревку

Следующее правило: превратить соответствующую строку в горбатый стиль письма

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

6. Преобразуйте первую букву строки в верхний регистр, а остальные — в нижний.

Например, «hello world» преобразуется в «Hello World».

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

7. Получите адреса изображений всех тегов изображений на веб-странице.

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

  return matchImgUrls
}
matchImgs(document.body.innerHTML)

8. Получить параметры запроса URL по имени

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]) : ''
}
// 1. name in front
// https://medium.com/?name=fatfish&sex=boy
console.log(getQueryByName('name')) // fatfish
// 2. name at the end
// https://medium.com//?sex=boy&name=fatfish
console.log(getQueryByName('name')) // fatfish
// 2. name in the middle
// https://medium.com//?sex=boy&name=fatfish&age=100
console.log(getQueryByName('name')) // fatfish

9. Соответствие 24-часовому времени

Определите, соответствует ли время 24-часовой системе. Правила соответствия следующие

1. 01:14
2. 1:14
3. 1:1
4. 23:59

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

10. Сопоставление формата даты

Требование состоит в том, чтобы соответствовать следующему формату

1. гггг-мм-дд
2. гггг.мм.дд
3. гггг/мм/дд

Например, 2021–08–22, 2021.08.22, 2021/08/22 можно не учитывать високосный год.

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

11. Сопоставьте значения цветов в шестнадцатеричном формате

Пожалуйста, сопоставьте значения цвета, такие как #ffbbad, #FFF, шестнадцатеричные из строки

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' ]

12. Проверьте правильность префикса URL

Проверьте, начинается ли URL-адрес с http или https

const checkProtocol = /^https?:/

console.log(checkProtocol.test('https://juejin.cn/')) // true
console.log(checkProtocol.test('http://juejin.cn/')) // true
console.log(checkProtocol.test('//juejin.cn/')) // false

13. Обратный струнный регистр

Мы изменим регистр строки, например, hello WORLD => HELLO world

const stringCaseReverseReg = /[a-z]/ig
const string = 'hello WORLD'

const string2 = string.replace(stringCaseReverseReg, (char) => {
  const upperStr = char.toUpperCase()
  return upperStr === char ? char.toLowerCase() : upperStr
})
console.log(string2) // HELLO world

14. Сопоставьте пути к папкам и файлам в Windows

const windowsPathRegex = /^[a-zA-Z]:\\(?:[^\\:*<>|"?\r\n/]+\\?)*(?:(?:[^\\:*<>|"?\r\n/]+)\.\w+)?$/console.log( windowsPathRegex.test("C:\\Documents\\Newsletters\\Summer2018.pdf") ) // true

console.log( windowsPathRegex.test("C:\\Documents\Newsletters\\") ) // true
console.log( windowsPathRegex.test("C:\\Documents\Newsletters") ) // true
console.log( windowsPathRegex.test("C:\\") ) // true

15. Соответствующий идентификатор

Пожалуйста, перехватите идентификатор в «‹div id="box"›hello world‹/div›»

const matchIdRegexp = /id="([^"]*)"/

console.log(`
  <div id="box">
    hello world
  </div>
`.match(matchIdRegexp)[1]) // box

16. Определите, верна ли версия

Мы требуем, чтобы версия была в формате XYZ, где XYZ — все числа, состоящие как минимум из одной цифры.

// x.y.z
const versionRegexp = /^(?:\d+\.){2}\d+$/

console.log(versionRegexp.test('1.1.1')) // true
console.log(versionRegexp.test('1.000.1')) // true
console.log(versionRegexp.test('1.000.1.1')) // false

17. Определите, является ли число целым числом

const intRegex = /^[-+]?\d*$/

const num1 = 12345
console.log(intRegex.test(num1)) // true
const num2 = 12345.1
console.log(intRegex.test(num2)) // false

18. Определите, является ли число десятичным

const floatRegex = /^[-\+]?\d+(\.\d+)?$/

const num = 1234.5
console.log(floatRegex.test(num)) // true

19. Определите, содержит ли строка только буквы

const letterRegex = /^[a-zA-Z]+$/

const letterStr1 = 'fatfish'
console.log(letterRegex.test(letterStr1)) // true
const letterStr2 = 'fatfish_frontend'
console.log(letterRegex.test(letterStr2)) // false

20. Определите правильность URL-адреса

const urlRegexp= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

console.log(urlRegexp.test("https://medium.com/")) // true

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .