Objeto RegExp de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

Una expresión regular es una secuencia de caracteres que forma una patrón de búsqueda.

El patrón de búsqueda se puede utilizar para buscar y reemplazar texto. operaciones.

¿Qué es una expresión regular?

Una expresión regular es una secuencia de caracteres que forma una búsqueda patrón.

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 búsqueda de texto y operaciones de reemplazo de texto.

Sintaxis

/pattern/modifiers;

Ejemplo

/w3schools/i;

Ejemplo explicado:

/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 de cadena

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

El método search() utiliza una expresión para buscar un coincidencia y devuelve la posición de la coincidencia.

El método replace() devuelve una cadena modificada donde Se reemplaza el patrón.

Usando String search() con una cadena

El método search() busca en una cadena un valor específico y devuelve la posición de la coincidencia:

Ejemplo

Utilice una cadena para realizar una búsqueda de "W3schools" en una cadena:

let text = "Visit W3Schools!";
let n = text.search("W3Schools");

El resultado en n será:

6

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Search a string for &quot;W3Schools&quot;, and display the position of the match:</p>

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

<script>
let text = "Visit W3Schools!"; 
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>

</body>
</html>

Usando la cadena search() con una expresión regular

Ejemplo

Utilice una expresión regular para realizar una búsqueda que no distinga entre mayúsculas y minúsculas de "w3schools" en una cadena:

let text = "Visit W3Schools";
let n = text.search(/w3schools/i);

El resultado en n será:

6

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search a string for "w3Schools", and display the position of the match:</p>

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

<script>
let text = "Visit W3Schools!"; 
let n = text.search(/w3Schools/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:

let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3Schools");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

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

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

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>

Utilice la cadena replace() con una expresión regular

Ejemplo

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

let text = "Visit Microsoft!";
let result = text.replace(/microsoft/i, "W3Schools");

El resultado en res será:

Visit W3Schools!

Pruébelo usted mismo →

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

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

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

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace(/microsoft/i, "W3Schools");
}
</script>

</body>
</html>

¿Te diste cuenta?

Se pueden utilizar argumentos de expresión regular (en lugar de argumentos de cadena) 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

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

Modificador:

i

Descripción: realizar coincidencias que no distingan entre mayúsculas y minúsculas

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a case-insensitive search for "w3schools" in a string:</p>

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

<script>
let text = "Visit W3Schools";
let result = text.match(/w3schools/i);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

g

Descripción: Realizar una coincidencia global (buscar todas las coincidencias en lugar de detenerse después de la primera)

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for "is" in a string:</p>

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

<script>
let text = "Is this all there is?";
let result = text.match(/is/g);
document.getElementById("demo").innerHTML = result; 
</script>

</body>
</html>

Modificador:

m

Descripción: Realizar coincidencia multilínea

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a multiline search for "is" at the beginning of each line in a string:</p>

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

<script>
let text = "\nIs th\nis it?";
let result = text.match(/^is/m);
document.getElementById("demo").innerHTML = "Result is: " + result;
</script>

</body>
</html>

Patrones de expresión regulares

Los paréntesis se utilizan para encontrar una variedad de caracteres:

Modificador:

[abc]

Descripción: busca cualquiera de los caracteres entre corchetes

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the character "h" in a string:</p>

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

<script>
let text = "Is this all there is?";
let result = text.match(/[h]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

[0-9]

Descripción: Encuentra cualquiera de los dígitos entre paréntesis

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the numbers 1 to 4 in a string:</p>

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

<script>
let text = "123456789";
let result = text.match(/[1-4]/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

(x|y)

Descripción: Encuentra cualquiera de las alternativas separadas con |

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for any of the specified alternatives (red|green):</p>

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

<script>
let text = "re, green, red, green, gren, gr, blue, yellow";
let result = text.match(/(red|green)/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Los metacaracteres son caracteres con un significado especial:

Modificador:

\d

Descripción: Encuentra un dígito

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for digits in a string:</p>

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

<script>
let text = "Give 100%!"; 
let result = text.match(/\d/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

\s

Descripción: buscar un carácter de espacio en blanco

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for whitespace characters in a string:</p>

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

<script>
let text = "Is this all there is?";
let result = text.match(/\s/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

\b

Descripción: busque una coincidencia al principio de una palabra como esta: \bWORD, o al final de una palabra así: PALABRA\b

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>beginning</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/\bLO/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search for the characters "LO" in the <b>end</b> of a word in the phrase:</p>
<p>"HELLO, LOOK AT YOU!"</p>

<p>Found in position: <span id="demo"></span></p>

<script>
let text = "HELLO, LOOK AT YOU!"; 
let result = text.search(/LO\b/);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

\uxxxx

Descripción: busque el carácter Unicode especificado por el número hexadecimal xxxx

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for the hexadecimal number 0057 (W) in a string:</p>

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

<script>
let text = "Visit W3Schools. Hello World!"; 
let result = text.match(/\u0057/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Los cuantificadores definen cantidades:

Modificador:

n+

Descripción: Coincide con cualquier cadena que contenga al menos un n

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for at least one "o" in a string:</p>

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

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/o+/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

n*

Descripción: Coincide con cualquier cadena que contenga cero o más apariciones de n

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for an "l", followed by zero or more "o" characters:</p>

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

<script>
let text = "Hellooo World! Hello W3Schools!"; 
let result = text.match(/lo*/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Modificador:

n?

Descripción: Coincide con cualquier cadena que contenga cero o una ocurrencia de n

Pruébalo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for a "1", followed by zero or one "0" characters:</p>

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

<script>
let text = "1, 100 or 1000?";
let result = text.match(/10?/g);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Usando el objeto RegExp

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

Usando prueba()

El método test() es un método de expresión RegExp.

Busca un patrón en una cadena y devuelve verdadero o falso, dependiendo del resultado.

El siguiente ejemplo busca una cadena para el carácter "e":

Ejemplo

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

Como hay una "e" en la cadena, el resultado del código anterior será:

true

Pruébelo usted mismo →

<!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>
let text = document.getElementById("p01").innerHTML;
const pattern = /e/;
document.getElementById("demo").innerHTML = pattern.test(text);
</script>

</body>
</html>

No es necesario poner primero la expresión regular en una variable. Los dos Las líneas anteriores se pueden acortar a una:

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

Usando ejecutivo()

El método exec() es un método de expresión RegExp.

Busca en una cadena un patrón específico y devuelve el texto encontrado como un objeto.

Si no se encuentra ninguna coincidencia, devuelve un objeto (nulo) vacío.

El siguiente ejemplo busca una cadena para el carácter "e":

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

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

<script>
const 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>

Referencia completa de RegExp

Para obtener una referencia completa, vaya a nuestro Completo Referencia de expresiones regulares de JavaScript.

La referencia contiene descripciones y ejemplos de todas las RegExp. propiedades y métodos.