30 fragmentos de código Regex útiles para desarrolladores web

Las expresiones regulares son una herramienta poderosa que debería estar en el cinturón de herramientas de todos los desarrolladores. Pueden coincidir con una cadena de caracteres basada en parámetros muy complejos, lo que puede ahorrarle mucho tiempo al crear sitios web dinámicos.

Los desarrolladores web se enfrentan a tareas diferentes a las de los desarrolladores de software, pero se mantienen muchos de los mismos fundamentos del código. Expresiones regulares (o expresiones regulares) tiene un empinada curva de aprendizaje inicialpero pueden ser tremendamente poderoso cuando se usa correctamente.

La parte más complicada es aprender la sintaxis y aprender a escribir su propio código de expresiones regulares desde cero. Para ahorrar tiempo, he organizado 30 fragmentos de código regex diferentes que puede incorporar en proyectos de desarrollo. Y dado que la expresión regular no se limita a un solo idioma, puede aplicar estos fragmentos a cualquier cosa, desde JavaScript a PHP o Pitón.

Guía para principiantes de expresiones regulares (regex)

1. Fortaleza de la contraseña

^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$

Comprobar la seguridad de una contraseña suele ser subjetivo, por lo que no existe una respuesta correcta absoluta. Pero creo que este fragmento de expresión regular es un excelente punto de partida si no desea escribir su propio verificador de seguridad de contraseña desde cero. (Fuente)

Los 15 mejores administradores de contraseñas para 2023

2. Color hexadecimal

#([a-fA-F]|[0-9]){3, 6}

El campo del desarrollo web es omnipresente con códigos de colores hexadecimales. Este fragmento de expresión regular se puede usar para extraer coincidencias de código hexadecimal de cualquier cadena para cualquier propósito. (Fuente)

3. Validar dirección de correo electrónico

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm

Una de las tareas más comunes para un desarrollador es verificar si una cadena tiene el formato de una dirección de correo electrónico. Hay muchas variantes diferentes para realizar esta tarea, por lo que este enlace de SitePoint ofrece dos fragmentos de código distintos para verificar la sintaxis del correo electrónico con una cadena. (Fuente)

4. Dirección IPv4

/b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)b/

Similar a una dirección de correo electrónico es la dirección IP típica utilizada para identificar una computadora específica que accede a Internet. Esta expresión regular verificará una cadena para ver si sigue la sintaxis de la dirección IPv4. (Fuente)

5. Dirección IPv6

(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))

Alternativamente, es posible que desee verificar una dirección para la sintaxis IPv6 más nueva con este fragmento de expresión regular más avanzado. La diferencia es menor, aunque vital durante el desarrollo. (Fuente)

6. Separador de miles

/d{1,3}(?=(d{3})+(?!d))/g

Los sistemas de numeración tradicionales requieren una coma, un punto o alguna otra marca cada tercer dígito en un número mayor. Este código regex opera en cualquier número y aplicará cualquier marca que elija a cada tercer dígito, separándolo en miles, millones, etc. (Fuente)

7. Anteponer HTTP al hipervínculo

if (!s.match(/^[a-zA-Z]+:///))
 {
 s="http://" + s;
 }

Ya sea que esté trabajando en JavaScript, Ruby o PHP, esta expresión regular puede resultar muy útil. Verificará cualquier cadena de URL para ver si tiene un prefijo HTTP/HTTPS y, de no ser así, lo antepondrá en consecuencia. (Fuente)

8. Extraiga el dominio de la URL

/https?://(?:[-w]+.)?([-w]+).w+(?:.w+)?/?.*/i

Cada dominio del sitio web contiene el protocolo inicial (HTTP o HTTPS) y, a menudo, un subdominio más la ruta de la página adicional. Puede usar este fragmento para eliminar todo eso y devolver solo el nombre de dominio sin adornos adicionales.

9. Ordenar palabras clave por número de palabras

^[^s]*$ matches exactly 1-word keyword
 ^[^s]*s[^s]*$ matches exactly 2-word keyword
 ^[^s]*s[^s]* matches keywords of at least 2 words (2 and more)
 ^([^s]*s){2}[^s]*$ matches exactly 3-word keyword
 ^([^s]*s){4}[^s]*$ matches 5-words-and-more keywords (longtail)

Los usuarios de Google Analytics y Webmaster Tools realmente disfrutarán de esta expresión regular. Puede ordenar y organizar las palabras clave en función del número de palabras utilizadas en una búsqueda.

Esto puede ser numéricamente específico (es decir, solo 5 palabras) o puede coincidir con un rango de palabras (es decir, 2 o más palabras). Cuando se usa para ordenar datos analíticos, esta es una expresión poderosa. (Fuente)

10. Encuentra una cadena Base64 válida en PHP

?php[ t]eval(base64_decode('(([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)?){1}'));

Si es un desarrollador de PHP, es posible que en algún momento deba analizar el código en busca de objetos binarios codificados en Base64. Este fragmento se puede aplicar a todo el código PHP y verificará cualquier cadena Base64 existente. (Fuente)

11. Número de teléfono válido

^+?d{1,3}?[- .]?(?(?:d{2,3}))?[- .]?ddd[- .]?dddd$

Corto, dulce y al punto. Este código regex validará cualquier sintaxis de número de teléfono tradicional basada principalmente en el estilo estadounidense de números de teléfono.

Dado que esto puede convertirse en un tema bastante complicado, recomiendo hojear este hilo de Stack para obtener respuestas más detalladas. (Fuente)

12. Espacios en blanco iniciales y finales

^[ s]+|[ s]+$

Utilice este fragmento de código para extraer los espacios en blanco iniciales/posteriores de una cadena. Esto puede no ser un gran problema, pero a veces puede afectar la salida cuando se extrae de una base de datos o se aplica a la codificación de otro documento. (Fuente)

13. Extraiga la fuente de la imagen)

&lt; *[img][^&gt;]*[src] *= *["']{0,1}([^"' &gt;]*)

Si por alguna razón necesita extraer la fuente de una imagen directamente desde HTML, este fragmento de código es la solución perfecta. Aunque puede funcionar sin problemas en el backend, los desarrolladores de JS frontend deberían confiar en el método .attr() de jQuery para el frontend. (Fuente)

14. Validar fecha en formato DD/MM/AAAA

^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))1|(?:(?:29|30)(/|-|.)(?:0?[1,3-9]|1[0-2])2))(?:(?:1[6-9]|[2-9]d)?d{2})$|^(?:29(/|-|.)0?23(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))4(?:(?:1[6-9]|[2-9]d)?d{2})$

Las fechas son complicadas porque pueden aparecer como texto+números, o simplemente como números con diferentes formatos. PHP tiene una función de fecha fantástica, pero esta no siempre es la mejor opción cuando se extrae una cadena sin formato. En su lugar, considere usar esta expresión regular hecha para esta sintaxis de fecha específica. (Fuente)

15. Coincidencia de ID de video de YouTube

/http://(?:youtu.be/|(?:[a-z]{2,3}.)?youtube.com/watch(?:?|#!)v=)([w-]{11}).*/gi

YouTube ha mantenido la misma estructura de URL durante años porque simplemente funciona. También es el sitio para compartir videos más popular en la web, por lo que los videos de YouTube tienden a generar la mayor parte del tráfico.

Si necesita extraer una ID de video de YouTube de una URL, este código regex es perfecto y debería funcionar perfectamente para todas las variantes de las estructuras de URL de YouTube. (Fuente)

16. ISBN válido

/b(?:ISBN(?:: ?| ))?((?:97[89])?d{9}[dx])b/i

Los libros impresos siguen un sistema de numeración conocido como ISBN. Esto puede ser bastante complicado si considera las diferencias entre ISBN-10 e ISBN-13.

Sin embargo, este increíble fragmento le permite validar un número ISBN y verificar si es ISBN10 o 13. Todo el código está escrito en PHP, por lo que esto debería resultar excepcionalmente útil para los desarrolladores web. (Fuente)

17. Verifique el código postal

^d{5}(?:[-s]d{4})?$

El creador de este fragmento no solo publicó su trabajo de forma gratuita, sino que también se tomó el tiempo de explicarlo. Encontrará este fragmento útil ya sea que esté comparando un código postal típico de 5 dígitos o la versión más larga de 9 dígitos.

Tenga en cuenta que esto está diseñado principalmente para el sistema estadounidense de códigos postales, por lo que puede requerir ajustes para otros países. (Fuente)

18. Nombre de usuario de Twitter válido

/@([A-Za-z0-9_]{1,15})/

Aquí hay un fragmento de código muy pequeño para compararlo con los nombres de usuario de Twitter que se encuentran en una cadena. comprueba si @mencionar sintaxis que es perfecta para escanear automáticamente el contenido de un tweet (o tweets). (Fuente)

19. Números de tarjetas de crédito

^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35d{3})d{11})$

La validación de un número de tarjeta de crédito a menudo requiere una plataforma segura alojada en otro lugar en línea. Pero regex se puede usar para los requisitos mínimos de un número de tarjeta de crédito típico.

Puede encontrar una lista más completa de códigos para tarjetas individuales aquí. Esto incluye Visa, MasterCard, Discover y muchas otras. (Fuente)

20. Encuentra atributos CSS

^s*[a-zA-Z-]+s*[:]{1}s[a-zA-Z0-9s.#]+[;]{1}

Puede ser raro ejecutar expresiones regulares sobre CSS, pero tampoco es una situación increíblemente extraña.

Este fragmento de código se puede usar para extraer todas las propiedades y valores CSS coincidentes de los selectores individuales. Se puede usar por varias razones, posiblemente para ver fragmentos de CSS o para eliminar propiedades duplicadas. (Fuente)

21. Eliminar comentarios HTML

&lt;!--(.*?)--&gt;

Si por alguna razón necesita eliminar todos los comentarios de un bloque de HTML, este es el código de expresiones regulares que debe usar. Junto con la expresión, encontrará un ejemplo de PHP usando preg_replace. (Fuente)

22. URL del perfil de Facebook

/(?:http://)?(?:www.)?facebook.com/(?:(?:w)*#!/)?(?:pages/)?(?:[w-]*/)*([w-]*)/

Facebook es increíblemente popular y ha pasado por muchos esquemas de URL diferentes. En una situación en la que está tomando las URL de perfil de los usuarios, puede ser útil analizar las cadenas y confirmar que están estructuradas correctamente. Este fragmento puede hacer exactamente eso y es perfecto para todos los enlaces de estilo FB. (Fuente)

23. Comprobar la versión de Internet Explorer

^.*MSIE [5-8](?:.[0-9]+)?(?!.*Trident/[5-9].0).*$

El cambio de Microsoft a Edge no ha sido unánime y muchas personas todavía confían en el Internet Explorer clásico. Los desarrolladores a menudo necesitan verificar las versiones de IE para manejar las inconsistencias con los motores de renderizado.

Este fragmento se puede usar en JavaScript para probar un agente de navegador según la versión de Internet. Se está utilizando Explorer (5-11). (Fuente)

24. Precio de extracción

/($[0-9,]+(.[0-9]{2})?)/

Los precios vienen en una variedad de formatos que contienen decimales, comas y símbolos de moneda. Esta expresión regular puede verificar todos estos formatos diferentes para extraer un precio de cualquier cadena. (Fuente)

25. Analizar encabezado de correo electrónico

/b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+.)+[A-Z]{2,6}b/i

Con esta única línea de código, puede analizar el encabezado de un correo electrónico para extraer la información «para» del encabezado. Se puede usar en conjunto con múltiples correos electrónicos unidos.

Si prefiere evitar las expresiones regulares para esta tarea, puede confiar en una biblioteca de análisis. (Fuente)

26. Haga coincidir un tipo de archivo particular

/^(.*.(?!(htm|html|class|js)$))?[^.]*$/i

Cuando se trata de varios formatos de archivo como .xml, .html y .js, puede ser útil verificar los archivos tanto localmente como los cargados por los usuarios. Este fragmento extrae una extensión de archivo para verificar si es válida de una serie de extensiones válidas que se pueden cambiar según sea necesario. (Fuente)

27. Haga coincidir una cadena de URL

/[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}.[a-z]{2,4}b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?/gi

Este fragmento se puede usar tanto para cadenas HTTPS como HTTP para verificar si el texto coincide con la sintaxis del dominio TLD tradicional. También hay una implementación simple de esta expresión regular usando RegExp de JavaScript. (Fuente)

28. Agregue rel=”nofollow” a los enlaces

(&lt;as*(?!.*brel=)[^&gt;]*)(href="https://www.hongkiat.com/blog/regex-web-developers/https?://)((?!(?:(?:www.)?".implode('|(?:www.)?', $follow_list).'))[^"]+)"((?!.*brel=)[^&gt;]*)(?:[^&gt;]*)&gt;

Si está trabajando con un lote de código HTML, puede ser espantoso aplicar trabajo manual en tareas repetitivas. Las expresiones regulares son perfectas para esta ocasión y ahorrarán mucho tiempo.

Este fragmento puede extraer todos los vínculos de anclaje de un bloque de HTML y agregar el rel=”nofollow” atribuye a cada elemento. El desarrollador que escribió este código tuvo la amabilidad de publicar la expresión sin procesar más un ejemplo de trabajo en PHP.

29. Coincidencia de consulta de medios

/@media([^{]+){([sS]+?})s*}/g

Desglose las consultas de medios CSS en sus parámetros y propiedades. Esto puede ayudarlo a analizar CSS externo de una manera más limpia con un enfoque más directo en cómo funciona el código. (Fuente)

30. Sintaxis de búsqueda de Google

/([+-]?(?:'.+?'|".+?"|[^+- ]{1}[^ ]*))/g

Puede crear su propio código de expresiones regulares para manipular el texto que se puede buscar utilizando la sintaxis de marca registrada de Google. El signo más (+) denota palabras clave adicionales y el signo menos (-) denota palabras que deben ignorarse y eliminarse de los resultados.

Es un fragmento bastante complicado, pero si se usa correctamente, puede proporcionar una base para construir su propio algoritmo de búsqueda. (Fuente)

Envolver

El camino para dominar las expresiones regulares es largo pero gratificante si te apegas a él. Más allá de las herramientas típicas de expresiones regulares, la mejor manera de estudiar es a través de la repetición. Intente crear aplicaciones web que se basen en estos fragmentos de expresiones regulares para aprender cómo funcionan en una aplicación web que funciona realmente. Y si tiene otros fragmentos para sugerir, puede publicarlos en el área de comentarios a continuación.