30 fragmentos de código Regex que todos los desarrolladores web deberían saber

Las expresiones regulares son una herramienta poderosa que debe estar en el cinturón de herramientas de cada desarrollador. 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 que los desarrolladores de software, pero muchos de los mismos fundamentales del código permanecen. Las expresiones regulares (o regex ) tienen una curva de aprendizaje inicial abrupta, pero pueden ser tremendamente poderosas si se usan correctamente .

La parte más difícil es aprender la sintaxis y aprender a escribir su propio código regex desde cero. Para ahorrar tiempo, he organizado 30 fragmentos de código regex diferentes que puede incorporar a proyectos de desarrollo. Y dado que Regex no está limitado a un único idioma, puede aplicar estos fragmentos a cualquier cosa, desde JavaScript a PHP o Python .

1. Fuerza de la contraseña

 ^ (? =. * [AZ]. * [AZ]) (? =. * [! @ # $ & *]) (? =. * [0-9]. * [0-9]) (? = . * [az]. * [az]. * [az]). {8} $ 

Comprobar la fortaleza de una contraseña suele ser subjetiva, por lo que no hay una respuesta correcta absoluta. Pero creo que este fragmento de regex es un gran punto de partida si no quieres escribir desde cero tu propio comprobador de fuerza de contraseñas.

2. Color hexadecimal

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

El campo del desarrollo web es omnipresente con códigos de color hexadecimales. Este fragmento de regex se puede usar para extraer coincidencias de código hexadecimal de cualquier cadena para cualquier propósito.

3. Validar la dirección de correo electrónico

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

Una de las tareas más comunes para un desarrollador es comprobar si una cadena está formateada al estilo 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.

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.

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 comprobar una dirección para la sintaxis de IPv6 más nueva con este fragmento de regex más avanzado. La diferencia es menor, aunque vital durante el desarrollo.

6. Separador de miles

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

Los sistemas de numeración tradicionales requieren una coma, 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 que se separa en miles, millones, etc.

7. Anteponer HTTP a 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 si no, lo antepondrá en consecuencia.

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 muchas veces un subdominio más la ruta de la página adicional. Puede usar este fragmento para cortar todo eso y devolver solo el nombre de dominio sin adornos adicionales.

9. Ordenar palabras clave por conteo de palabras

 ^ [^ \ s] * $ coincide exactamente con la palabra clave de 1 palabra ^ [^ \ s] * \ s [^ \ s] * $ coincide exactamente con la palabra clave de 2 palabras ^ [^ \ s] * \ s [^ \ s] * coincide con las palabras clave de al menos 2 palabras (2 y más) ^ ([^ \ s] * \ s) {2} [^ \ s] * $ coincide exactamente con la palabra clave de 3 palabras ^ ([^ \ s] * \ s ) {4} [^ \ s] * $ coincide con palabras clave de 5 palabras y más (longtail) 

Los usuarios de Google Analytics y las Herramientas para webmasters realmente disfrutarán de esta expresión regular. Puede ordenar y organizar palabras clave según la cantidad 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.

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 usted es un desarrollador de PHP, en algún momento es posible que deba analizar el código en busca de objetos binarios codificados en Base64. Este fragmento se puede aplicar a todos los códigos PHP y comprobará si existen cadenas de Base64 existentes.

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

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

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 escanear este hilo de Stack para obtener respuestas más detalladas.

12. Espacio en blanco inicial y posterior

 ^ [\ s] + | [\ s] + $ 

Utilice este fragmento de código para sacar espacios en blanco iniciales / finales de una cadena. Esto puede no ser un gran problema, pero a veces puede afectar a la salida cuando se extrae de una base de datos o se aplica a otra codificación de documentos.

13. Origen de la imagen de extracción

 \ <* [img] [^ \>] * [src] * = * [\ "\ '] {0, 1} ([^ \" \' \>] *) 

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 ejecutarse sin problemas en el backend, los desarrolladores de JS frontend deberían confiar en el método .attr () de jQuery para el frontend.

14. Validar fecha en formato DD / MM / YYYY

 ^ (? :( ?: 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? 2 \ 3 (? :(? :( ?: 1 [6-9] | [2-9] \ d )? (?: 0 [48] | [2468] [048] | [13579] [26]) | (? :( ?: 16 | [2468] [048] | [3579] [26]) 00)) )) $ | ^ (?: 0? [1-9] | 1 \ d | 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 solo como números con diferentes formatos. PHP tiene una fantástica función de fecha, pero esta no siempre es la mejor opción cuando se tira de una cadena sin formato. Considere en cambio usar esta expresión regular hecha para esta sintaxis de fecha específica.

15. Partido ID de video de YouTube

 /http:\/\/(?:youtu\.be\/|(?:[az]{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 el mayor tráfico.

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

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 un poco complicado si tenemos en cuenta las diferencias entre el ISBN-10 y el ISBN-13.

Sin embargo, este increíble fragmento te permite validar un número de ISBN y comprobar si es ISBN10 o 13. Todo el código está escrito en PHP, por lo que debería ser excepcionalmente útil para los desarrolladores web.

17. Verificar el código postal

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

El creador de este fragmento no solo lanzó su trabajo de forma gratuita, sino que también se tomó el tiempo para explicarlo. Encontrará este fragmento útil si está haciendo coincidir 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á destinado principalmente para el sistema estadounidense de códigos postales, por lo que puede requerir ajustes para otros países.

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 hacer coincidir contra los nombres de usuario de Twitter encontrados en una cadena. Comprueba la sintaxis @mention, que es perfecta para escanear automáticamente los contenidos de un tweet (o tweets).

19. Números de tarjeta 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 | 35 \ d {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 muchos otros.

20. Encuentra los atributos de CSS

 ^ \ s * [a-zA-Z \ -] + \ s * [:] {1} \ s [a-zA-Z0-9 \ s. #] + [;] {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 cada propiedad y valor CSS correspondiente de los selectores individuales. Se puede usar por varias razones, posiblemente para ver fragmentos de CSS o eliminar propiedades duplicadas.

21. Eliminar comentarios HTML

Si por algún motivo necesita eliminar todos los comentarios de un bloque de HTML, este es el código regex que debe usar. Junto con la expresión encontrará un ejemplo de PHP usando preg_replace.

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 tome URL de perfil de los usuarios, podría 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 estilo FB.

23. Verifique 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 aún confían en el clásico Internet Explorer. Los desarrolladores a menudo necesitan verificar versiones de IE para manejar 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 Explorer (5-11) que se esté utilizando.

24. Precio del extracto

 /(\$[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 sacar un precio de cualquier cadena.

25. Parse el encabezado de correo electrónico

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

Con esta única línea de código, puede analizar a través de un encabezado de correo electrónico para extraer información "desde" del encabezado. Se puede usar en conjunto con múltiples correos electrónicos unidos.

Si prefiere evitar la expresión regular para esta tarea, puede confiar en una biblioteca de análisis sintáctico.

26. Coincidir con un tipo de archivo particular

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

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

27. Coincidir con una cadena de URL

 /[-a-zA-Z0-9@:%_\+.~#?&//=]{2, 256}\.[az]{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.

28. Agregar rel = "nofollow" a Enlaces

 (  ] *) (href = "https?: //) ((?! (?: (?: www \.)? 'implode (' | (?: www \.)? ', $ follow_list).') ) [^ "] +)" ((?!. * \ brel =) [^>] *) (?: [^>] *)> 

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

Este fragmento puede extraer todos los enlaces de anclaje de un bloque de HTML y anexar el atributo rel = "nofollow" a cada elemento. El desarrollador que escribió este código tuvo la amabilidad de publicar la expresión cruda más un ejemplo de trabajo en PHP.

29. Media Query Match

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

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

30. Sintaxis de Búsqueda de Google

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

Puede construir su propio código de expresiones regulares para manipular texto de búsqueda 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 utilizado correctamente puede proporcionar una base para construir su propio algoritmo de búsqueda.

Envolver

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

Ahora lea: 50 fragmentos de CSS útiles que todo diseñador debería tener

Sierra es una hermosa biblioteca Dark UI construida en Sass

En un mundo lleno de marcos de frontend, puede ser difícil clasificar todas las opciones. Pero, si eres un amante de Sass, Sierra es el nuevo marco de interfaz de usuario más genial para ver.Es completamente personalizable y se ejecuta completamente en código SCSS . Esto significa que viene con decenas de parciales de SCSS y bibliotecas relacionadas que se fusionan en una poderosa (y gratuita) biblioteca de UI. C

(Consejos de tecnología y diseño)

Cómo mostrar texto en la imagen con CSS3 mix-blend-mode

Los fondos de las imágenes se ven muy bien detrás de los textos de pantallas grandes. Sin embargo, su implementación de CSS no es tan simple. Podemos usar el background-clip: text; propiedad, sin embargo, sigue siendo una característica experimental sin suficiente soporte de navegador.La alternativa CSS para mostrar un fondo de imagen detrás de un texto está usando la propiedad mix-blend-mode . Los

(Consejos de tecnología y diseño)