Expresiones regulares en Javascript

Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda. El patrón de búsqueda puede ser usado para buscar texto o para reemplazar operaciones.

Que es una expresión regular

Una expresión regular es una secuencia de caracteres que forma un patrón de búsqueda. Cuando busca datos en un texto, puede utilizar este patrón de búsqueda para describir lo que está buscando. Una expresión regular puede ser un solo carácter o un patrón más complicado.

Las expresiones regulares se pueden utilizar para realizar todo tipo de operaciones de búsqueda y reemplazo de texto.

Sintaxis

/patrón/modificadores;

Ejm

var patt = /w3schools/i;

La explicación del ejm es:

  • / w3schools / i es una expresión regular.
  • w3schools es un patrón (para usar en una búsqueda).
  • i es un modificador (modifica la búsqueda para que no distinga entre mayúsculas y minúsculas).

Usando métodos string

En JavaScript, las expresiones regulares se utilizan a menudo con los dos métodos de cadena: search() y replace().

El método search() usa una expresión para buscar una coincidencia y devuelve la posición de la coincidencia. El método replace() devuelve una cadena modificada donde se reemplaza el patrón.

Uso de la búsqueda de cadenas () con una cadena

El método search() busca en una cadena un valor especificado y devuelve la posición de la coincidencia.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Métodos String Javascript</h2>
<p>Busca una cadena para "Websarrolladores" y muestre la posición de la coincidencia:</p>

<p id="demo"></p>

<script>
var str = "Visita Websarrolladores";
var n = str.search("Websarrolladores");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>

Uso de la búsqueda de cadenas () con una expresión regular

Ejm

Utilice una expresión regular para realizar una búsqueda que no distinga entre mayúsculas y minúsculas de “Websarrolladores” en una cadena.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Expresiones regulares Javascript</h2>
<p>Busque una cadena para "Websarrolladores" y muestre la posición de la coincidencia:</p>

<p id="demo"></p>

<script>
var str = "Bienvenido a Websarrolladores";
var n = str.search(/websarrolladores/i);
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>

Usando String replace () con una cadena

El método replace() reemplaza un valor especificado con otro valor en una cadena.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Métodos String Javascript</h2>
<p>Reemplace "Microsoft" por "Websarrolladores" en el párrafo siguiente:</p>
<button onClick="myFunction()">Haz clic</button>
<p id="demo">Visita Microsoft</p>

<script>
function myFunction()
{
var str = document.getElementById("demo").innerHTML;
var n = str.replace("Microsoft","Websarrolladores");
document.getElementById("demo").innerHTML = n;
}
</script>
</body>
</html>

Use String replace () con una expresión regular

Ejm

Use una expresión regular que no distinga entre mayúsculas y minúsculas para reemplazar Microsoft con Websarrolladores en una cadena:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Replace "microsoft" with "Websarrolladores" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Websarrolladores");
document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Los argumentos de expresión regular (en lugar de argumentos de cadena) se pueden usar en los métodos anteriores. Las expresiones regulares pueden hacer que su búsqueda sea mucho más poderosa (no distingue entre mayúsculas y minúsculas, por ejemplo).

Modificadores de expresiones regulares

Los modificadores se pueden utilizar para realizar búsquedas más globales que no distinguen entre mayúsculas y minúsculas:

Modificador Descripción
i Realizar una coincidencia que no distinga entre mayúsculas y minúscula
g realizar una coincidencia global (encontrar todas las coincidencias en lugar de detenerse después de la primera coincidencia)
m Realizar emparejamiento multilínea

Patrones de expresión regular

Los corchetes se utilizan para encontrar un rango de caracteres:

Expresión Descripción
[abc] Encuentra cualquiera de los caracteres entre paréntesis
[0-9] Encuentra cualquiera de los dígitos entre corchetes
(x|y) Busque cualquiera de las alternativas separadas por |

Los metacaracteres son personajes con un significado especial:

Metacharacter Description
\d Encuentra un dígito
\s Encuentra un carácter de espacio en blanco
\b Busque una coincidencia al principio de una palabra como esta: \ bWORD, o al final de una palabra como esta: WORD \ b
\uxxxx Busque el carácter Unicode especificado por el número hexadecimal xxxx

Los cuantificadores definen cantidades:

Cuantificador Descripción
n+ Coincide con cualquier cadena que contenga al menos una n
n* Coincide con cualquier cadena que contenga cero o más ocurrencias de n
n? Coincide con cualquier cadena que contenga cero o una apariciones de n

Usando el objeto RegExp

En JavaScript, el objeto RegExp es un objeto de expresión regular con propiedades y métodos predefinidos.

Usando test()

El método test() es un método de expresión RegExp. Busca un patrón en una cadena y devuelve verdadero o falso, según el resultado. El siguiente ejemplo busca en una cadena el carácter “e”.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>
<p>Search for an "e" in the next paragraph:</p>
<p id="p01">The best things in life are free!</p>
<p id="demo"></p>

<script>
text = document.getElementById("p01").innerHTML; 
document.getElementById("demo").innerHTML = /e/.test(text);
</script>

</body>
</html>

No tienes que poner la expresión regular en una variable primero. Las dos líneas de arriba se pueden acortar a una:

/e/.test("The best things in life are free!");

Usando exec()

El método exec() es un método de expresión RegExp. Busca una cadena para un patrón específico y devuelve el texto encontrado como un objeto. Si no se encuentra ninguna coincidencia, devuelve un objeto vacío (nulo).

El siguiente ejemplo busca en una cadena el carácter “e”.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p id="demo"></p>

<script>
var obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>

</body>
</html>