
Un JavaScript de expresiones regulares (o expresiones regulares ) es una secuencia de caracteres que podemos utilizar para trabajar eficazmente con cuerdas. Usando esta sintaxis, podemos:
- buscar texto en una cadena
- reemplazar subcadenas en una cadena
- extraer información de una cadena
Desde la década de 1950, las expresiones regulares se formalizaron como un concepto para la búsqueda de patrones en algoritmos de procesamiento de cadenas.
JavaScript tiene soporte para expresiones regulares directamente integrado en el lenguaje. Una comprensión sólida de las expresiones regulares te harĆ” un programador mucho mĆ”s efectivo. ¡Entonces empecemos!
Un patrón de expresiones regulares muy bÔsico
Aquà hay un patrón bÔsico:
var regex = / hola /; console.log (regex.test ('hola mundo')); // cierto
Simplemente estamos haciendo coincidir el texto literal con la cadena de prueba. En breve veremos el mƩtodo de prueba de expresiones regulares en detalle.
¿Por quĆ© usar expresiones regulares?
Como se mencionó, las expresiones regulares son una forma de describir patrones en datos de cadena. Podemos usarlos para verificar una cadena de caracteres, por ejemplo, para buscar una dirección de correo electrónico, haciendo coincidir el patrón definido por nuestra expresión regular.
Crear una expresión regular
En JavaScript, podemos crear una expresión regular de dos maneras: usando el constructor RegExp o usando barras diagonales
/
para encerrar el patrón de expresiones regulares .El método del constructor:
La sintaxis es asĆ:
nuevo RegExp (patrón [, banderas])
AsĆ por ejemplo:
var regexConst = nuevo RegExp ('abc');
El mƩtodo literal:
La sintaxis es asĆ:
/ patrón / banderas
Un ejemplo:
var regexLiteral = / abc /;
Nota: las banderas son opcionales, ¡las veremos mĆ”s adelante en este artĆculo!
En el caso en que necesite crear expresiones regulares dinƔmicamente, deberƔ usar el mƩtodo constructor.
En cualquier caso, el resultado darƔ un objeto regex, que tendrƔ los mismos mƩtodos y propiedades adjuntas, para nuestro uso.
Métodos de expresión regular
Cuando probamos nuestras expresiones regulares, generalmente usamos uno de dos mƩtodos:
RegExp.prototype.test()
o RegExp.prototype.exec()
.RegExp.prototype.test ()
Utilizamos este método para probar si se ha encontrado una coincidencia o no. Acepta una cadena que probamos con una expresión regular y devuelve
true
o false
, dependiendo de si se encuentra la coincidencia o no.
Veamos un ejemplo:
var regex = / hola /; var str = 'hola mundo'; resultado var = regex.test (str); console.log (resultado); // devuelve 'verdadero' ya que hola estĆ” presente en nuestra cadena
RegExp.prototype.exec ()
Utilizamos este método para recibir una matriz de todos los grupos coincidentes. Acepta una cadena que probamos contra nuestra expresión regular.
Un ejemplo:
var regex = / hola /; var str = 'hola mundo'; resultado var = regex.exec (str); console.log (resultado); // devuelve ['hola', Ćndice: 0, entrada: 'hola mundo', grupos: indefinido]
En este ejemplo,
‘hello’
es nuestro patrón coincidente, index
es donde comienza la expresión regular y input
es la cadena que se pasó.
Para el resto del artĆculo, utilizaremos el
test()
método.El poder de la expresión regular
Hasta ahora hemos visto cómo crear patrones simples de expresión regular. Esto es realmente solo la punta del iceberg. ¡Vamos a sumergirnos en la sintaxis para ver todo el poder de las expresiones regulares para manejar tareas mĆ”s complejas!
Un ejemplo de una tarea mĆ”s compleja serĆa si tuviĆ©ramos que hacer coincidir varias direcciones de correo electrónico. Al usar los caracteres especiales definidos en la sintaxis, ¡podemos lograr esto!
Echemos un vistazo ahora para que podamos comprender mejor y, por lo tanto, utilizar expresiones regulares en nuestros programas.
Banderas
En cualquier expresión regular, podemos usar las siguientes banderas:
g
: coincide con el patrón varias vecesi
: hace que la expresión regular no sea sensiblem
: habilita el modo multilĆnea. Dónde^
y$
coincidir con el inicio y el final de toda la cadena. Sin esto, las cadenas de varias lĆneas coinciden con el principio y el final de cada lĆnea.u
: habilita el soporte para Unicodes
: abreviatura de una sola lĆnea , hace.
que tambiĆ©n coincida con los nuevos caracteres de lĆnea
Las banderas también se pueden combinar en una sola expresión regular y el orden de la bandera no importa. Se agregan al final de la cadena en literales regex :
/hello/ig.test('HEllo ')
// devuelve verdadero
Si usa constructores de objetos RegExp , se agregan como segundo parƔmetro:
nuevo RegExp ('hola', 'ig'). test ('HEllo')
// devuelve verdadero
Grupos de personajes:
Conjunto de caracteres [abc]
Usamos conjuntos de caracteres para unir diferentes personajes en una sola posición. Coinciden con cualquier carÔcter individual en la cadena con los caracteres dentro de los corchetes:
var regex = / [hc] ello /; console.log (regex.test ('hola')); // devuelve verdadero console.log (regex.test ('cello')); // devuelve verdadero console.log (regex.test ('jello')); // devuelve falso
Juego de caracteres negado [^ abc]
Coincide con todo lo que no estĆ” entre corchetes:
var regex = / [^ hc] ello /; console.log (regex.test ('hola')); // devuelve false console.log (regex.test ('cello')); // devuelve false console.log (regex.test ('jello')); // devuelve verdadero
Rangos [az]
Si queremos unir todas las letras de un alfabeto en una sola posición, podemos usar rangos. Por ejemplo: [aj] coincidirĆ” con todas las letras de a a j. TambiĆ©n podemos usar dĆgitos como [0–9] o letras mayĆŗsculas como [AZ] :
var regex = / [az] ello /; console.log (regex.test ('hola')); // devuelve verdadero console.log (regex.test ('cello')); // devuelve verdadero console.log (regex.test ('jello')); // devuelve verdadero
Si existe al menos un personaje en el rango que probamos, devolverĆ” verdadero:
/[azfont>/.test('a ') // true
/[azfont>/.test('1') // false
/[azfont>/.test('A ') // true
/ [ac] / .test ('d') // false
/[acfont>/.test('cd ') // true (ya que' c 'estĆ” en el rango)
Los rangos tambiƩn se pueden combinar usando
-
:/ [AZ-0-9] / /[AZ-0-9font>/.test('a ') // true /[AZ-0-9font>/.test('1') // true / [AZ -0-9] /. Test ('A') // verdadero
Partidas de artĆculos de rango mĆŗltiple
Podemos verificar si una cadena contiene uno o solo un carÔcter en un rango. Comience la expresión regular con
^
y termine con $
:/^[AZfont>$/.test('A ') // true
/^[AZfont>$/.test('AB') // false
/^[AZfont>$/.test('Ab ') // falso
/^[AZ-0-9font>$/.test('1 ') // verdadero
/^[AZ-0-9font>$/.test('A1') // falso
Metacaracteres
Los metacaracteres son personajes con un significado especial. Echemos un vistazo a algunos de estos aquĆ:
\d
: coincide con cualquier dĆgito, siendo[0-9]
\D
: coincide con cualquier carĆ”cter que no sea un dĆgito, efectivamente[^0-9]
\w
: coincide con cualquier carƔcter alfanumƩrico (mƔs subrayado), equivalente a[A-Za-z_0-9]
\W
: coincide con cualquier carƔcter no alfanumƩrico, por lo que cualquier cosa excepto[^A-Za-z_0-9]
\s
: coincide con cualquier carĆ”cter de espacio en blanco: espacios, tabulaciones, lĆneas nuevas y espacios Unicode\S
: coincide con cualquier carƔcter que no sea un espacio en blanco\0
: coincide con nulo\n
: coincide con un carĆ”cter de nueva lĆnea\t
: coincide con un carÔcter de tabulación\uXXXX
: coincide con un carÔcter unicode con el código XXXX (requiere lau
bandera).
: coincide con cualquier carĆ”cter que no sea un carĆ”cter de nueva lĆnea (p\n
. ej. ) (a menos que use las
bandera, explicada mƔs adelante)[^]
: coincide con cualquier carĆ”cter, incluidos los caracteres de nueva lĆnea. Es muy Ćŗtil en cadenas de varias lĆneas.
Cuantificadores
Los cuantificadores son sĆmbolos que tienen un significado Ćŗnico en expresiones regulares.
Vamos a verlos en acción:
+
Coincide con la expresión anterior 1 o mÔs veces:
var regex = / \ d + /; console.log (regex.test ('1')); // true console.log (regex.test ('1122')); // cierto
*
Coincide con la expresión anterior 0 o mÔs veces:
var regex = / hi * d /; console.log (regex.test ('hd')); // true console.log (regex.test ('hid')); // cierto
?
Coincide con la expresión anterior 0 o 1 vez, es decir, el patrón anterior es opcional:
var regex = / hii? d /; console.log (regex.test ('hid')); // true console.log (regex.test ('hiid')); // true console.log (regex.test ('hiiid')); // falso
^
Coincide con el comienzo de la cadena, la expresión regular que sigue debe estar al comienzo de la cadena de prueba:
var regex = / ^ h /; console.log (regex.test ('hola')); // true console.log (regex.test ('bye')); // falso
$
Coincide con el final de la cadena, la expresión regular que la precede debe estar al final de la cadena de prueba:
var regex = /.com$/; console.log (regex.test ('test@email.com ')); // true console.log (regex.test ('prueba @ correo electrónico')); // falso
{N}
Coincide exactamente con N ocurrencias de la expresión regular anterior:
var regex = / hi {2} d /; console.log (regex.test ('hiid')); // true console.log (regex.test ('hid')); // falso
{N,}
Coincide con al menos N apariciones de la expresión regular anterior.
var regex = / hi {2,} d /; console.log (regex.test ('hiid')); // true console.log (regex.test ('hiiid')); // true console.log (regex.test ('hiiiid')); // cierto
{N,M}
Coincide con al menos N ocurrencias y como mÔximo M ocurrencias de la expresión regular anterior (cuando M> N).
var regex = / hi {1,2} d /; console.log (regex.test ('hid')); // true console.log (regex.test ('hiid')); // true console.log (regex.test ('hiiid')); // falso
X|Y
La alternancia coincide con X o Y:
var regex = / (rojo | amarillo) bicicleta /; console.log (regex.test ('bicicleta roja')); // true console.log (regex.test ('bicicleta amarilla')); // true console.log (regex.test ('brown bike')); // falso
Nota: Para usar cualquier carÔcter especial como parte de la expresión, por ejemplo, si desea hacer coincidir el literal
+
o .
, entonces deberĆ” escapar de ellos con una barra diagonal inversa \
. Al igual que:var regex = / a + b /; // esto no funciona var regex = / a \ + b /; // ¡esto funciona! console.log (regex.test ('a + b')); // cierto
Revisando Regex
Con estos conceptos frescos en nuestras mentes, ¡repasemos lo que hemos aprendido!
Coincide con cualquier nĆŗmero de 10 dĆgitos:
var regex = / ^ \ d {10} $ /; console.log (regex.test ('4658264822')); // cierto
Entonces
\d
coincide con cualquier carĆ”cter de dĆgitos. {10}
coincide con la expresión anterior, en este caso \d
exactamente 10 veces. Entonces, si la cadena de prueba contiene menos de o mĆ”s de 10 dĆgitos, el resultado serĆ” falso.Haga coincidir una fecha con el siguiente formato:
DD-MM-YYYY
o DD-MM-YY
var regex = / ^ (\ d {1,2} -) {2} \ d {2} (\ d {2})? $ /; console.log (regex.test ('01 -01-2000 ')); // true console.log (regex.test ('01 -01-00 ')); // true console.log (regex.test ('01 -01-200 ')); // falso
Aquà hemos envuelto toda la expresión dentro
^
y $
, para que la coincidencia abarque toda la cadena. (
es el comienzo de la primera subexpresión. \d{1,2}
coincide con al menos 1 dĆgito y como mĆ”ximo 2 dĆgitos. -
coincide con el guión literal. )
es el final de la primera subexpresión.
Luego
{2}
coincide con la primera subexpresión exactamente 2 veces. \d{2}
coincide exactamente con 2 dĆgitos. (\d{2})?
coincide exactamente con 2 dĆgitos. Sin embargo, es opcional, por lo que cualquier aƱo contiene 2 dĆgitos o 4 dĆgitos.Conclusión
¡Y ahĆ vamos! Hemos examinado Expresiones regulares desde lo mĆ”s bĆ”sico hasta implementaciones mĆ”s avanzadas. Incluyendo los mĆ©todos literales y de construcción, mĆ©todos de prueba, banderas y sintaxis de caracteres.
¡Las expresiones regulares pueden ser bastante complejas! Sin embargo, tomarse el tiempo para aprender la sintaxis lo ayudarĆ” en gran medida a identificar los patrones de expresiones regulares mĆ”s fĆ”cilmente. ¡Cualquier nueva confianza que gane seguramente lo tendrĆ” listo para conquistar el próximo obstĆ”culo que encuentre en su viaje de codificación!
¡Espero que hayas encontrado Ćŗtil este artĆculo! Puedes seguirme en Medium. TambiĆ©n estoy en Twitter . SiĆ©ntase libre de dejar cualquier pregunta en los comentarios a continuación. EstarĆ© encantado de ayudar!
No hay comentarios.:
Publicar un comentario