Share
Las expresiones regulares pueden dar miedo ... realmente miedo. Afortunadamente, una vez que memoriza lo que representa cada símbolo, el miedo desaparece rápidamente. Si encajas en el título de este artículo, ¡hay mucho que aprender! Empecemos.
La clave para aprender a usar efectivamente las expresiones regulares es tomar solo un día y memorizar todos los símbolos. Este es el mejor consejo que puedo ofrecer. ¡Siéntate, crea algunas tarjetas de memoria y simplemente memorízalos! Aquí están los más comunes:
Sí, no es divertido, solo memorízalos. Estarás agradecido si lo haces!
Puedes estar seguro de que querrás arrancarte el cabello en un momento u otro cuando una expresión no funcione, no importa cuánto deba, ¡o crees que debería! Descargar la aplicación RegExr Desktop es esencial, y es realmente divertido entretenerse con eso. Además de la verificación en tiempo real, también ofrece una barra lateral que detalla la definición y el uso de cada símbolo. Descargalo!.
¡El siguiente paso es aprender a usar estos símbolos! Si el video es tu preferencia, estás de suerte! Mire la serie de videos de cinco lecciones, "Expresiones regulares para Dummies".
En esta sección final, revisaremos algunos de los métodos de JavaScript más importantes para trabajar con expresiones regulares.
Éste acepta un único parámetro de cadena y devuelve un valor booleano que indica si se ha encontrado una coincidencia. Si no necesariamente tiene que realizar una operación con un resultado coincidente específico, por ejemplo, al validar un nombre de usuario, "prueba" hará el trabajo bien..
var username = 'JohnSmith'; alerta (/ [A-Za-z _-] + /. prueba (nombre de usuario)); // devuelve true
Arriba, comenzamos por declarar una expresión regular que solo permite letras mayúsculas y minúsculas, un guión bajo y un guión. Envolvemos estos caracteres aceptados entre paréntesis, lo que designa un clase de personaje. El símbolo "+", que lo procede, significa que estamos buscando uno o más de cualquiera de los caracteres anteriores. Luego probamos ese patrón contra nuestra variable, "JohnSmith". Debido a que hubo una coincidencia, el navegador mostrará un cuadro de alerta con el valor "verdadero".
Probablemente ya estés familiarizado con el método de división. Acepta una sola expresión regular que representa donde debería ocurrir la "división". Tenga en cuenta que también podemos usar una cadena si lo preferimos.
var str = 'esta es mi cadena'; alerta (str.split (/ \ s /)); // alerta "esto, es, mi, cadena"
Al pasar "\ s", que representa un solo espacio, ahora hemos dividido nuestra cadena en una matriz. Si necesita acceder a un valor en particular, simplemente agregue el índice deseado.
var str = 'esta es mi cadena'; alerta (str.split (/ \ s /) [3]); // alertas "cadena"
Como es de esperar, el método "reemplazar" le permite reemplazar un cierto bloque de texto, representado por una cadena o expresión regular, con una cadena diferente.
Si quisiéramos cambiar la cadena "Hola, Mundo" a "Hola, Universo", podríamos hacer lo siguiente:
var someString = 'Hola, Mundo'; someString = someString.replace (/ World /, 'Universe'); alerta (someString); // alertas "Hola Universo"
Cabe señalar que, para este ejemplo simple, podríamos haber utilizado simplemente .replace ('Mundo', 'Universo'). Además, el uso del método de reemplazo no sobrescribe automáticamente el valor de la variable, debemos volver a asignar el valor devuelto a la variable, someString.
Para otro ejemplo, imaginemos que deseamos tomar algunas precauciones de seguridad elementales cuando un usuario se registra en nuestro sitio ficticio. Tal vez deseamos tomar su nombre de usuario y eliminar cualquier símbolo, comillas, punto y coma, etc. Realizar una tarea de este tipo es trivial con JavaScript y expresiones regulares..
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + /, "); alert (username); // JohnSmith; @%
Dado el valor de alerta producido, se podría suponer que hubo un error en nuestro código (que revisaremos en breve). Sin embargo, éste no es el caso. Si se da cuenta, el punto y coma inmediatamente después de la "J" se eliminó como se esperaba. Para decirle al motor que continúe buscando en la cadena más coincidencias, agregamos una "g" directamente después de nuestra barra inclinada de cierre; este modificador, o bandera, significa "global". Nuestro código revisado ahora debería verse así:
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + / g, "); alerta (nombre de usuario); // alertas JohnSmith
Ahora, la expresión regular busca la cadena ENTERA y reemplaza todos los caracteres necesarios. Para revisar la expresión real - .reemplazar (/ [^ A-Za-z \ d _-] + / g, "); - Es importante notar el símbolo de carot dentro de los soportes. Cuando se coloca dentro de una clase de caracteres, esto significa "encuentra cualquier cosa que NO ES ..." Ahora, si releemos, dice, encuentra cualquier cosa que NO sea una letra, un número (representado por \ d), un guión bajo o un guión ; Si encuentra una coincidencia, reemplácela por nada o, en efecto, elimine el carácter por completo..
A diferencia del método de "prueba", "match ()" devolverá una matriz que contiene cada una de las coincidencias encontradas.
nombre var = 'JeffreyWay'; alerta (name.match (/ e /)); // alertas "e"
El código anterior alertará una sola "e". Sin embargo, observe que en realidad hay dos e en la cadena "JeffreyWay". Nosotros, una vez más, debemos usar el modificador "g" para declarar un "solbúsqueda global.
nombre var = 'JeffreyWay'; alerta (name.match (/ e / g)); // alertas "e, e"
Si queremos alertar a uno de esos valores específicos con la matriz, podemos hacer referencia al índice deseado después de los paréntesis..
nombre var = 'JeffreyWay'; alerta (name.match (/ e / g) [1]); // alertas "e"
Revisemos otro ejemplo para asegurarnos de que lo entendemos correctamente..
var string = 'Esto es solo una cadena con algunos 12345 y algunos! @ # $ mezclados.'; alert (string.match (/ [a-z] + / gi)); // alertas "Esto es, simplemente, una, cadena, con, algunos, y, algunos, mezclados, en"
Dentro de la expresión regular, creamos un patrón que coincide con una o más letras mayúsculas o minúsculas, gracias al modificador "i". También estamos agregando la "g" para declarar una búsqueda global. El código anterior alertará "Esto es, simplemente, una cadena, con, algunos y, algunos, mezclados,". Si luego quisiéramos atrapar uno de estos valores dentro de la matriz dentro de una variable, solo hacemos referencia al índice correcto.
var string = 'Esto es solo una cadena con algunos 12345 y algunos! @ # $ mezclados.'; var matches = string.match (/ [a-z] + / gi); alerta (partidos [2]); // alertas "solo"
Solo para practicar, intentemos dividir una dirección de correo electrónico - [email protected] - en su nombre de usuario y dominio respectivos: "nettuts" y "tutsplus".
var email = '[email protected]'; alert (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // alertas "nettuts, tutsplus"
Si eres nuevo en expresiones regulares, el código anterior puede parecer un poco desalentador. No se preocupe, lo hizo para todos nosotros cuando empezamos. Sin embargo, una vez que lo divides en subconjuntos, es bastante simple. Vamos a tomarlo pieza por pieza..
.reemplazar (/ ([a-z \ d _-] +)
A partir de la mitad, buscamos cualquier letra, número, guión bajo o guión y coincidimos con uno o más de ellos (+). Nos gustaría acceder al valor de lo que coincida aquí, así que lo envolvemos entre paréntesis. De esa manera, podemos hacer referencia a este conjunto emparejado más tarde!
@ ([a-z \ d _-] +)
Inmediatamente después de la coincidencia anterior, busque el símbolo @ y luego otro conjunto de una o más letras, números, guiones bajos y guiones. Una vez más, envolvemos ese conjunto entre paréntesis para poder acceder a él más tarde..
\. [a-z] 2,4 / ig,
Continuando, encontramos un solo período (debemos escapar con "\" debido al hecho de que, en expresiones regulares, coincide con cualquier carácter (a veces excluyendo un salto de línea). La última parte es encontrar ".com. "Sabemos que la mayoría, si no todos, los dominios tendrán un rango de sufijo de dos a cuatro caracteres (com, edu, net, nombre, etc.). Si somos conscientes de ese rango específico, podemos renunciar a usar un símbolo más genérico como * o +, y en cambio envuelve los dos números entre llaves, representando el mínimo y el máximo, respectivamente.
'$ 1, $ 2')
Esta última parte representa el segundo parámetro del método de reemplazo, o con qué nos gustaría reemplazar los conjuntos coincidentes. Aquí, estamos usando $ 1 y $ 2 para referirnos a lo que se almacenó dentro del primer y segundo conjunto de paréntesis, respectivamente. En estos casos en particular, $ 1 se refiere a "nettuts", y $ 2 se refiere a "tutsplus".
Para nuestro proyecto final, replicaremos el objeto de ubicación. Para aquellos que no están familiarizados, el objeto de ubicación le proporciona información sobre la página actual: href, host, puerto, protocolo, etc. Tenga en cuenta que esto es solo por razones de práctica. En un sitio del mundo real, solo use el objeto de ubicación preexistente!
Primero comenzamos creando nuestra función de ubicación, que acepta un solo parámetro que representa la URL que deseamos "descodificar"; lo llamaremos "loc".
función loc (url)
Ahora, podemos llamarlo así, y pasar en una url gibberish:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere'); A continuación, debemos devolver un objeto que contenga un puñado de métodos..
función loc (url) return
Aunque no los crearemos todos, imitaremos unos cuantos. El primero será "buscar". Usando expresiones regulares, tendremos que buscar la URL y devolver todo dentro de la cadena de consulta.
return search: function () return url.match (/\?(.+)/ i) [1]; // devuelve "somekey = somevalue & anotherkey = anothervalue # theHashGoesHere"
Arriba, tomamos la URL pasada y tratamos de hacer coincidir nuestras expresiones regulares con ella. Esta expresión busca en la cadena el signo de interrogación, que representa el comienzo de nuestra cadena de consulta. En este punto, tenemos que atrapar a los personajes restantes, por lo que el (. +) Se envuelve entre paréntesis. Finalmente, necesitamos devolver solo ese bloque de caracteres, así que usamos [1] para apuntarlo.
Ahora crearemos otro método que devuelva el hash de la url, o cualquier cosa después del signo de libra.
hash: function () return url.match (/#(.+)/ i) [1]; // devuelve "theHashGoesHere",
Esta vez, buscamos el signo de número y, una vez más, atrapamos los siguientes caracteres entre paréntesis para que podamos referirnos solo a ese subconjunto específico - con [1].
El método del protocolo debería devolver, como supondría, el protocolo utilizado por la página, que generalmente es "http" o "https".
protocolo: function () return url.match (/ (ht | f) tps?: / i) [0]; // devuelve 'http:',
Este es un poco más complicado, solo porque hay algunas opciones para compensar: http, https y ftp. Aunque podríamos hacer algo como - (http | https | ftp) - Sería más limpio hacer: (ht | f) tps?
Esto indica que primero debemos encontrar un carácter "ht" o "f". A continuación, hacemos coincidir los caracteres "tp". La "s" final debe ser opcional, por lo que agregamos un signo de interrogación, lo que significa que puede haber cero o una instancia del carácter anterior. Mucho más bonito.
En aras de la brevedad, este será nuestro último. Simplemente devolverá la url de la página..
href: function () return url.match (/ (. + \. [a-z] 2,4) / ig); // devuelve "http://www.somesite.com"
Aquí estamos combinando todos los caracteres hasta el punto en que encontramos un punto seguido de dos o cuatro caracteres (que representan com, au, edu, nombre, etc.). Es importante darse cuenta de que podemos hacer estas expresiones tan complicadas o tan simples como nos gustaría. Todo depende de lo estrictos que debemos ser..
function loc (url) return search: function () return url.match (/\?(.+)/ i) [1]; , hash: function () return url.match (/#(.+)/ i) [1]; , protocol: function () return url.match (/ (ht | f) tps?: /) [0]; , href: function () return url.match (/ (. + \. [a-z] 2,4) / ig);
Con esa función creada, podemos alertar fácilmente a cada subsección haciendo:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alerta (l.href ()); // http://www.net.tutsplus.com alert (l.protocol ()); // http:… etc. ¡Gracias por leer! Soy Jeffrey Way ... dándome de baja.
