Este artículo le mostrará cómo usar expresiones regulares (Regex) para validar cadenas coincidentes en JavaScript.
Todas las entradas de los usuarios recopiladas en sus aplicaciones deben validarse. Si se requiere una dirección de correo electrónico, se debe ingresar una dirección de correo electrónico válida o el envío del correo electrónico fallará. Si se requiere un número de teléfono, se debe ingresar un número de teléfono válido, y así sucesivamente. Regex se puede usar para esta validación haciendo coincidir una cadena completa con un formato específico.
Regex también se puede usar para buscar texto dentro de una cadena, para una coincidencia parcial, lo que lo hace útil para buscar/reemplazar o buscar operaciones.
Como verá a continuación, sin embargo, las expresiones regulares pueden ser bastante difíciles de escribir. A veces tiene más sentido usar la expresión regular de otra persona o usar software para generar las expresiones requeridas.
Expresiones regulares (regex)
Expresiones regulares (Regex) es un estándar mediante el cual se puede buscar texto para encontrar patrones de búsqueda coincidentes. Regex en sí mismo es una secuencia de caracteres que define un conjunto de reglas o un patrón de búsqueda con qué texto se compara.
Regex se puede usar para hacer coincidir todo o parte de una cadena. Al hacer coincidir una cadena completa, se puede usar para validar la entrada del usuario. Al hacer coincidir partes de una cadena, se puede usar para confirmar si una cadena contiene una subcadena, o para buscar cadenas por un valor específico y encontrar dónde aparece el objetivo de búsqueda.
Regex en JavaScript:cómo funciona
Para usar regex en JavaScript, simplemente necesita definir el patrón de regex que desea hacer coincidir, luego pasarlo a uno de los métodos de regex incorporados para ver si el patrón de búsqueda coincide con todos o parte de la cadena.
¿Cómo son las expresiones regulares?
Las expresiones regulares son notoriamente complejas. Una expresión regular para validar una dirección de correo electrónico se ve así:
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]) Sí, realmente es así de complejo . Entonces, antes de usar expresiones regulares, considere seriamente si su necesita para usar expresiones regulares. A menudo, hay formas más fáciles de lograr lo mismo; por ejemplo, muchos métodos de cadena para buscar y reemplazar texto, que aceptan expresiones regulares como parámetro, aceptarán una cadena simple, que podría ser suficiente para su caso de uso.
Encadenar estos métodos para realizar múltiples reemplazos también puede ser más fácil de codificar y más fácil de leer.
También hay otras formas de validar y verificar la entrada, como usar el tipo de entrada HTML correcto. En lugar de validar un correo electrónico con expresiones regulares, puede usar un campo de entrada de tipo de correo electrónico, que puede ser validado por el navegador web como una protección inicial contra una entrada incorrecta. Cualquier validación realizada en el front-end también debe verificarse en el back-end una vez que se envían los datos.
Escribir/generar patrones de búsqueda Regex
Regex es un dolor de escribir. Nadie parece disfrutar trabajando con expresiones regulares. Aunque algunos obtienen satisfacción al escribir expresiones regulares, generalmente se considera un ejercicio de frustración y es propenso a errores, lo que puede tener un efecto perjudicial en las aplicaciones de producción si una expresión regular no se comporta como se esperaba.
Las reglas y la sintaxis son bastante difíciles de aprender, por lo que los principiantes suelen tener dificultades.
Suele ser más sensato usar un generador de expresiones regulares en lugar de escribir a mano tus propios patrones de búsqueda. Le ahorrará tiempo en las primeras etapas y podrá ver cómo se ve la expresión regular funcional y aprender de ella si decide comenzar a escribir la suya propia.
Además, para casos de uso común, los foros en línea proporcionan un buen recurso para patrones de búsqueda de expresiones regulares preescritos para cosas como direcciones de correo electrónico, números de teléfono, códigos postales, etc. Simplemente realice una búsqueda en Internet del patrón de expresiones regulares. quieres y probablemente encontrarás que alguien más ya ha escrito un patrón para ello.
Definición de expresiones regulares en JavaScript
El objeto RegExp se utiliza para almacenar expresiones regulares en JavaScript. La sintaxis para declarar un objeto RegExp es la siguiente:
var myRegExp = new RegExp('EXPRESSION'); Tenga en cuenta que EXPRESSION aquí estará la expresión regular contra la que desea validar su cadena.
También puede definir expresiones regulares como una expresión literal:
var myRegExp = /EXPRESSION/;
Sin embargo, este no es el método preferido ya que es más difícil de leer y la expresión no se puede modificar una vez creada. Usar el objeto RegExp tiene un propósito menos ambiguo cuando lee y depura su código. Usar el objeto RegExp también significa que puede almacenar sus expresiones como cadenas y pasarlas al constructor, agregando flexibilidad.
Al usar el objeto RegExp, las expresiones pueden almacenarse como cadenas en un archivo o base de datos, lo que le permite mantener una lista de expresiones para su reutilización.
Uso de expresiones regulares en JavaScript
A continuación se muestran los métodos RegExp y String que se pueden usar con expresiones regulares para buscar y manipular cadenas, con un ejemplo de código para cada uno.
La expresión regular utilizada en cada ejemplo es deliberadamente simple, para que pueda ver cómo se utiliza la función en sí.
Buscar una coincidencia con exec()
El método RegExp.exec() busca una coincidencia en una cadena determinada y devuelve una matriz o null si no hay resultado:
var myRegEx = RegExp('red');
var myString = 'blue green red purple';
console.log(myRegEx.exec(myString)); Arriba, buscamos 'rojo' en la cadena y registramos el resultado.
Prueba de coincidencia completa con test()
El método RegExp.test() prueba una coincidencia dentro de la cadena dada, devolviendo VERDADERO o FALSO:
var myString = 'blue green red purple';
var myRegEx = new RegExp('red', 'g');
console.log(myRegEx.test(myString)); Observe el uso de la ‘g’ marca al inicializar el objeto RegExp:esto le dice a la expresión regular que realice una búsqueda global de la cadena.
Buscar todas las coincidencias con match() y coincidir con todo()
El método String.match() devuelve una matriz de todas las coincidencias en una cadena para la expresión regular dada. El siguiente ejemplo encuentra todas las letras mayúsculas en la cadena:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log(myString.match(myRegEx)); El método String.matchAll() hace lo mismo, pero devuelve un iterador :
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log([...myString.matchAll(myRegEx)]); Tenga en cuenta el uso de sintaxis extendida para expandir el iterable en una matriz para que pueda imprimirse usando console.log() .
Prueba de coincidencia en una cadena con search()
El método String.search() devuelve el índice para una coincidencia de expresiones regulares en la cadena, o -1 si no se encuentra:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('quick', 'g');
console.log(myString.search(myRegEx)); Reemplazar texto con replace()
El método String.replace() reemplazará la primera coincidencia en la cadena. La cadena original no se modificará, por lo que el resultado debe asignarse a una nueva variable si se va a utilizar:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('Hawaii', 'g');
console.log(myString.replace(myRegEx, 'New York')); Tenga en cuenta que si se pasa una cadena como término de búsqueda en lugar de un objeto RegExp, ¡solo se reemplazará la primera aparición encontrada!
Reemplazar todas las coincidencias con replaceAll()
El método String.replaceAll() reemplazará todas las apariciones de la coincidencia en la cadena, ya sea que se use Regex o una cadena para definir el término de búsqueda:
var myString = 'The quick brown fox jumps over the lazy dog and ignores the other dog';
var myRegEx = new RegExp('dog', 'g');
console.log(myString.replaceAll(myRegEx, 'cat')); Dividir una cadena en subcadenas con split()
El método String.split() divide una cadena en un punto determinado, que se puede determinar usando Regex:
var myString = '1 dog, 4 parrots, 6 pigs';
var myRegEx = new RegExp('(,)');
console.log(myString.split(myRegEx)); Arriba, la cadena se divide en la coma. Tenga en cuenta el uso de corchetes en la expresión regular:esto significa que las coincidencias se incluirán en el resultado donde normalmente String.split() las omitiría. .
¿Una forma más fácil?
Si usa expresiones regulares para validar la entrada y valida formatos estandarizados (como direcciones de correo electrónico y URL), considere usar una biblioteca de validación en su lugar. Todo el trabajo duro se ha hecho por usted, simplemente necesita pasar sus datos a la biblioteca y le permitirá saber si los datos tienen el formato correcto o incorrecto.
Si está buscando texto recopilado de la entrada del usuario, un archivo o una base de datos, también existen bibliotecas que son mucho más fáciles de usar y mucho más poderosas que confiar en expresiones regulares. Algunas bibliotecas le permiten buscar coincidencias exactas o aproximadas, lo que le permite realizar búsquedas más amplias y fáciles de usar.
Eso no quiere decir que las expresiones regulares deban evitarse a toda costa, cuando las necesite, las necesitará, y la necesidad, la complejidad y la implementación dependerán en gran medida de lo que intente construir.