Los desarrolladores han estado utilizando editores de texto durante mucho tiempo. Y como la mayoría de las herramientas, todos los editores de texto tienen una característica en común: buscar y reemplazar.
Si ha estado utilizando buscar y reemplazar durante un tiempo, es posible que sepa lo útil que es esta función. Pero la mayoría de nosotros no sabemos que esta herramienta es incluso más poderosa de lo que creemos.
No solo puede reemplazar cadenas simples, sino también patrones. Estos patrones se conocen como expresiones regulares .
Existen expresiones regulares en JavaScript y la mayoría de los otros lenguajes de programación. Regex (para abreviar) es una herramienta muy poderosa para ayudarlo a encontrar patrones de búsqueda simples y complejos.
Los algoritmos de búsqueda de cadenas también son una rama importante de la informática. En este artículo aprenderemos a usar esta increíble herramienta en JavaScript.
¿Por qué las expresiones regulares?
No comprenderá la importancia real de las expresiones regulares hasta que se le proporcione un documento extenso y se le indique que extraiga todos los correos electrónicos de él.
Puede hacerlo manualmente, pero hay un método súper rápido que puede hacerlo por usted. La mayoría de los editores de texto modernos permiten Regex en su opción Buscar. Generalmente se denota por .*.
Y eso no es todo lo que la expresión regular puede hacer: los correos electrónicos son solo un ejemplo. Puede buscar cualquier tipo de cadena que siga un patrón, por ejemplo, URL o texto entre paréntesis.
Regex también se puede utilizar para validar ciertos tipos de patrones, como validar el correo electrónico. Podría reemplazar alguna lógica de validación larga como esta:
function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot 2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };Con una sola línea como esta:
function isValidEmail(email) { return /^(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }Aunque esa expresión regular parece aterradora, no es algo que tengas que recordar. Una vez que comprenda cómo funciona, será muy sencillo de implementar.
Coincidencia de JavaScript Regex
En JavaScript, tenemos un método de coincidencia para cadenas. Este método se puede utilizar para hacer coincidir Regex en una cadena.
Este método es el mismo que el método de búsqueda en los editores de texto. Busca una cadena determinada con una expresión regular y devuelve una matriz de todas las coincidencias. El prototipo del método de coincidencia es el siguiente:
str.match(regexp)Esto devolverá una matriz de todas las coincidencias en la búsqueda de string ( str) para expresión regular ( regexp).
Un uso básico de este método sería contar todas las palabras en una cadena. Por ejemplo:
var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5Aprenderemos sobre esta \w+expresión regular más adelante en este artículo.
Usando tales expresiones regulares, podemos realizar varias tareas que de otra manera requerirían que escribiéramos lógica tediosa. Un ejemplo fue la función de validación de correo electrónico. Tenemos que probar todos los criterios, pero usando expresiones regulares puede simplificarlo.
Las expresiones regulares son válidas en la mayoría de las funciones de cadena, pero debe verificar el prototipo de la función si quiere estar seguro. Uno de esos métodos es el método Reemplazar. Aprendamos más sobre esto a continuación.
Método de reemplazo de JavaScript
JavaScript tiene una serie de funciones de utilidad de cadena. Reemplazar es uno de ellos. El prototipo del método de reemplazo es el siguiente:
const newStr = str.replace(regexp|substr, newSubstr|function)Como puede ver, el método de reemplazo actúa sobre una cadena y devuelve una cadena. Se necesitan dos parámetros: la cadena que se reemplazará y con qué se reemplazará.
El primer parámetro puede ser una cadena o una expresión regular. Aquí podemos usar el poder de las expresiones regulares para reemplazar patrones de búsqueda complejos con alguna cadena.
El segundo parámetro también podría ser una función. Para demostrarlo, veamos un ejemplo:
var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"Este ejemplo invierte cada palabra de una cadena. Como puede ver, reemplazar combinado con regex es una herramienta muy poderosa en JavaScript.
El método de reemplazo puede ser útil si desea reemplazar un patrón de búsqueda específico con alguna otra cadena después de algún procesamiento de la cadena original.
También se puede utilizar para corregir una coincidencia no válida, por ejemplo, para validar un correo electrónico y, si es posible, para corregir un correo electrónico no válido.
Ahora que sabemos lo útil que es Regex, aprendamos algunas expresiones regulares básicas y busquemos cadenas.
Expresiones regulares básicas
Aunque las expresiones regulares son un tema extenso, las básicas son muy fáciles de entender y recordar. Intentemos comprender algunos términos básicos asociados con las expresiones regulares.
Literales
Un literal es cualquier carácter que se evalúa como sí mismo y no en una forma general. Por lo tanto, wordtambién es una expresión regular válida que solo coincidirá con "palabra" .
Si desea reemplazar todas las instancias de una palabra determinada en JavaScript, puede hacer esto:
var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */Esto reemplaza todas las apariciones de JavaScript con JS. Logramos esto usando el gidentificador, que significa búsqueda global. Es decir, busca todas las apariciones en lugar de solo la primera.
También hay un iidentificador. Significa búsqueda que no distingue entre mayúsculas y minúsculas. Coincide con la cadena ignorando el caso.
Thus a literal can be used to match a specific character or group of characters.
Meta-characters
A meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters:
\dmatches any digit, that is, digits from 0 to 9\wmatches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9.\smatches any whitespace
Similarly, \D , \W and \S match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d would match any three digits in a row.
Quantifiers
A quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex:
*is used to match 0 or more occurrences of a given character.+is used to match 1 or more occurrences of a given character..is used to match either no occurrence or 1 occurrence of a given character.{min,max}or{n}can be used to match a number of occurrences in a range or a given number of times n
An example would be the one we used above to reverse every word in a string.
\w+matches every word in a string\wmatches any alpha-numeric character\w+matches one or more occurrences of an alpha-numeric character, that is, every word in a string.
We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:
var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"There are plenty of other uses for quantifiers.
Position meta-characters
There are also position meta-characters which represent a position. For example ^ represents the start of a line, $ represents end of a line, and \b represents word boundaries.
Conclusion
In this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns.
This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.
Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable.
Now you can use your own creativity and make wonderful regex – so good luck with your new skill.
This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.
Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io or my Github. Do checkout my other articles. Thank you.