20 expresiones regulares poderosas y útiles que debes dominar

Siga la cuenta oficial de WeChat de "Big Front-end Private Kitchen" y responda con la contraseña [Guía de entrevista] para recibir 107 páginas de preguntas de la entrevista front-end de forma gratuita.

Las expresiones regulares son una herramienta muy poderosa para encontrar patrones de cadenas. Dominar las expresiones regulares comunes puede mejorar enormemente nuestra eficiencia en las operaciones de cadenas y el procesamiento de texto.

1. Formato de moneda

A menudo necesito formatear moneda en mi trabajo y el uso de expresiones regulares lo hace muy fácil.

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

¿Tiene algún otro método? Usar Intl.NumberFormat es mi forma favorita.

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

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

¡Hay más de una forma de solucionarlo! Tengo otra manera de sentirme feliz.

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

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

¿Por qué debería aprender expresiones regulares? ¡Parece tan complicado! Perdí la confianza.

Simplemente relájate amigo mío y verás la magia de las expresiones regulares.

2. Dos métodos para eliminar espacios de cadenas

¿Qué debo hacer si quiero eliminar los espacios iniciales y finales de una cadena?

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

Es simple, ¿verdad? Por supuesto, usando expresiones regulares, tenemos al menos dos formas de hacerlo.

opcion uno

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

trim('  medium ') // 'medium'

Escenario 2

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

trim('  medium ') // 'medium'

3. Escapar de HTML

Una forma de prevenir ataques XSS es realizar un escape HTML. Las reglas de escape son las siguientes y los caracteres correspondientes deben convertirse en entidades equivalentes. Anti-escape consiste en convertir las entidades escapadas en los caracteres correspondientes.

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 sin escape

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. CamelCase una cuerda

Las siguientes reglas: cambie la cadena correspondiente a camello

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. Convierte la primera letra de la cadena a mayúscula y el resto a minúsculas.

Por ejemplo, "hola mundo" se convierte en "Hola mundo".

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. Obtenga las direcciones de imágenes de todas las etiquetas de imágenes en la página web.

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. Obtenga parámetros de consulta de URL por nombre

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. Haga coincidir la hora de 24 horas

Determine si la hora se ajusta al reloj de 24 horas. 

Las reglas de coincidencia son las siguientes:

• 01:14

• 1:14

• 1:1

• 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. Formato de fecha del partido

El requisito es coincidir con el siguiente formato.

• aaaa-mm-dd

• aaaa.mm.dd

• aaaa/mm/dd

Por ejemplo, 2021-08-22, 2021.08.22 y 2021/08/22 pueden ignorar los años bisiestos.

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. Haga coincidir los valores de color hexadecimales

Haga coincidir el valor del color de la cadena, como #ffbbad, #FFF hexadecimal

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. Compruebe si el prefijo de la URL es correcto

Compruebe si la URL comienza con http o 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.Cadena de mayúsculas y minúsculas inversas

Invertiremos el caso de la cadena, por ejemplo, hola MUNDO => HOLA mundo

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. Haga coincidir las rutas de carpetas y archivos en 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. Identificación del partido

Intercepte la identificación en "<div id="box">hola mundo</div>"

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

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

 

 

16. Determinar si la versión es correcta.

Requerimos que la versión esté en formato XYZ, donde XYZ son números con al menos un dígito

// 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. Determinar si un número es un número entero.

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

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

18. Determinar si un número es decimal.

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

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

19. Determinar si una cadena contiene solo letras.

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. Determina si la URL es correcta.

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

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

Dominar estas 20 expresiones regulares puede ayudarnos a completar rápidamente tareas comunes de verificar, reemplazar y extraer cadenas. Combinadas con los lenguajes de programación, las expresiones regulares son una herramienta poderosa para completar diversas operaciones de cadenas, y vale la pena invertir tiempo para dominarlas y usarlas.