Original article: How to Check if a String Contains a Substring in JavaScript

Cuando se trabaja con JavaScript, es posible que se necesite verificar si una cadena contiene a una subcadena. Una subcadena es una cadena dentro de otra cadena.

Específicamente es posible que debas verificar si una palabra contiene un carácter específico o un conjunto específico de caracteres.

Afortunadamente existen algunas maneras rápidas de lograrlo con JavaScript.

En este artículo aprenderás dos maneras de comprobar si una cadena contiene otra cadena usando métodos de JavaScript.

Específicamente aprenderás:

  • Cómo usar el método includes() de JavaScript.
  • Cómo usar el método indexOf() de JavaScript.

¿Qué es el método includes() de JavaScript? Veamos su sintaxis

El método includes() de JavaScript se introdujo con ES6 y la forma más común y moderna de verificar si una cadena contiene un caracter específico o una serie de caracteres.

La sintaxis general del método includes() es similar a la siguiente:

cadena.includes(subcadena, indice);

Donde:

  • cadena es la palabra sobre la cual haremos la búsqueda.
  • includes() es el método al que invocas las palabras que deseas buscar, que en este caso es una cadena.
  • El método includes() acepta dos argumentos, uno es obligatorio y el otro es opcional.
  • El primer argumento que acepta el método includes() es una subcadena y es obligatoria. Esta subcadena es el caracter o serie de caracteres que está verificando para ver si existen dentro de la cadena.
  • El segundo argumento que acepta el método includes() es el indice y es opcional. El indice se refiere a la posición desde la cual comenzará la búsqueda de la subcadena; el valor por defecto es 0 porque la indexación de los lenguajes de programación comienzan en 0.

El valor de retorno es un valor booleano. Un valor booleano puede ser true o false dependiendo de si la subcadena esta presente o no dentro de la cadena.

Algo a tener en cuenta es que el método includes() distingue entre mayúsculas y minúsculas, lo que se conoce como comportamiento case-sensitive.

¿Cómo verificar si una cadena contiene una subcadena especifica en JavaScript usando el método includes()?

Veamos un ejemplos de cómo funciona el método includes():

Primero, crea una variable que contenga la cadena Hola, mundo, esta es la cadena que quiero buscar. 

let cadena= "Hola, mundo";

Ahora crea una variable con la subcadena Hola, esta es la subcadena que quiero buscar en la cadena original.

let cadena = "Hola, mundo";
let subcadena = "Hola";

A continuación verificaré si existe la subcadena dentro de la cadena usando el método includes() e imprimirá el resultado por consola:

let cadena = "Hola, mundo";
let subcadena = "Hola";

console.log(cadena.includes(subcadena));

// salida
// true

El valor de retorno fue true significa que Hola está presente en la variable cadena.

Como se mencionó en la sección anterior el método includes() distingue entre mayúsculas y minúsculas.

Ve lo que sucede cuando cambio el valor de la variable cadena de Hola a hola:

let cadena = "Hola, mundo";
let subcadena = "hola";

console.log(cadena.includes(subcadena));

// salida
// false

El valor de retorno en este caso es false ya que no hay una subcadena hola con h minúscula. Por lo tanto ten esto en cuenta cuando trabajes con el método includes(), distingue entre mayúsculas y minúsculas.

Ahora veamos como usar el método includes() con el segundo argumento, indice.

Como recordatorio el segundo argumento especifica la posición desde la que desea iniciar la búsqueda en la subcadena.

Tomemos la misma variable cadena de los ejemplos anteriores:

let cadena= "Hola, mundo";

Cambiaré el valor de la variable subcadena a H:

let cadena = "Hola, mundo";
let subcadena = "H";

Y especificaré la búsqueda de la subcadena para que comience desde la posición 0:

let cadena = "Hola, mundo";
let subcadena = "H";

console.log(cadena.includes(subcadena, 0));

// salida
// true

El valor de retorno es true por que la subcadena H esta en la posición de índice 0 dentro de la cadena Hola, mundo.

Recuerda que la primera letra de la cadena tiene una posición de 0, la segunda una posición de 1 y así sucesivamente.

¿Qué es el método indexOf() en JavaScript? Veamos su sintaxis

Similar al método includes(), el método indexOf() de JavaScript comprueba si una cadena incluye una subcadena.

La sintaxis general del método indexOf() es similar a esta:

cadena.indexOf(suncadena, indice);

Donde:

  • cadena es la palabra sobre la cual se hará la búsqueda.
  • indexOf() es el método al que invocas para realizar la búsqueda.
  • El método indexOf() toma dos argumentos: uno es obligatorio y el otro es opcional.
  • El primer argumento del método indexOf() es una subcadena y es obligatorio. Esta subcadena es el caracter o serie de caracteres que estás buscando.
  • El segundo argumento del método indexOf() es el indice y es opcional. El indice se refiere a la posición desde la cual se comenzará la búsqueda de la subcadena. El valor por defecto es 0 porque la indexación en los lenguajes de programación comienza en 0.

La diferencia entre los dos método es el valor de retorno.

El método includes() regresa un valor booleano ( true o false ) mientras que indexOf() regresa un número.

El número será la posición inicial del índice donde se encuentra la subcadena que está buscando dentro de la cadena. El valor de retorno será -1 si la subcadena no se encuentra en la cadena.

Al igual que el método includes() el método indexOf() distingue entre mayúsculas y minúsculas.

¿Cómo verificar si una cadena contiene una subcadena especifica en JavaScript usando el método indexOf()?

Usemos el mismo ejemplo anterior para ver cómo funciona el método indexOf().

let cadena = "Hola, mundo";
let subcadena = "H";

En la variable cadena original y la variable subcadena de búsqueda.

let cadena = "Hola, mundo";
let subcadena = "H";

console.log(cadena.indexOf(subcadena));

// salida
// 0

El resultado es 0 que es la posición inicial de la subcadena que estamos buscando.

En este caso, el valor que buscaba era un solo caracter.

Cambiemos el valor de la subcadena H a Hola:

let cadena = "Hola, mundo";
let subcadena = "Hola";

console.log(cadena.indexOf(subcadena));

// salida
// 0

El valor de retorno es nuevamente 0 ya que indexOf() devuelve la posición inicial de la subcadena que está buscando. Dado que el primer carácter de la subcadena se encuentra en la posición 0, indexOf() regresa 0.

Ahora cambiemos el valor de la variable subcadena de Hola con un h minúscula:

let cadena = "Hola, mundo";
let subcadena = "hola";

console.log(cadena.indexOf(subcadena));

// salida
// -1

El valor de retorno es -1. Como se mencionó anteriormente, indexOf() distingue entre mayúsculas y minúsculas por lo que no puede encontrar una subcadena hola con h minúscula. Y cuando indexOf() no puede encontrar la subcadena dada, regresa -1.

Finalmente puede especificar el valor del indice desde el que desea comenzar su búsqueda pasando el segundo argumento que acepta indexOf().

let cadena = "Hola, mundo";
let subcadena = "hola";

console.log(cadena.indexOf(subcadena, 1));

// salida
// -1

Supongamos que deseas comenzar su búsqueda desde la posición 1. El valor de regreso es -1 ya que la posición inicial de la subcadena que esta buscando es 0. No se encuentra una coincidencia exacta desde la posición -1, por lo que indexOf() regresa -1.

¿Cómo realizar una verificación que no distinga entre mayúsculas y minúsculas usando los métodos includes() e indexOf()?

Hasta ahora, has visto que los métodos includes() e indexOf() no distinguen entre mayúsculas y minúsculas.

Pero, ¿qué sucede cuando deseas realizar una verificación que no distinga entre mayúsculas y minúsculas?

Para realizar una verificación que no distingue entre mayúsculas y minúsculas y ver si hay una subcadena dentro de una cadena, deberá convertir tanto la cadena original como la subcadena a minúsculas usando el método JavaScript toLowerCase() antes de llamar a uno de los dos métodos.

Así es como lo harías usando el método includes():

let cadena = "Hola, mundo";
let subcadena = "hola";

console.log(cadena.toLowerCase().includes(subcadena.toLowerCase()));

// salida
// true

Por defecto, el valor de retorno habría sido false porque la cadena original contiene una H mayúscula, mientras que la subcadena contiene una h minúscula. Después de convertir ambas cadenas a minúsculas, no tienes que preocuparte por el uso de mayúsculas en la cadena original y la subcadena que estás buscando.

Así es como harías lo mismo usando el método indexOf():

let cadena = "Hola, mundo";
let subcadena = "hola";

console.log(cadena.toLowerCase().indexOf(subcadena.toLowerCase()));

// salida
// 0

Por defecto, el valor de retorno habría sido -1 porque la cadena original y la subcadena que está buscando son diferentes.

Después de usar el método toLowerCase(), el método indexOf() devuelve la posición inicial de la subcadena.

Conclusión

¡Listo! Ahora sabes cómo verificar si una cadena contiene una subcadena en JavaScript.

Para obtener más información sobre JavaScript, diríjase a la nueva Certificación de estructuras de datos y algoritmos de JavaScript (en Beta por ahora) de freeCodeCamp.

Es un plan de estudios gratuito, bien pensado y estructurado donde aprenderás de forma interactiva. Al final, también crearás 5 proyectos para reclamar tu certificación y solidificar tus conocimientos.

Gracias por leer.