Cómo utilizar el método substring() en Javascript

No importa el lenguaje de programación que utilices, estamos seguros que en algún momento has tenido el “problema” de manejar cadenas de texto. Por ejemplo, suele ser muy común que necesitemos localizar y extraer una cadena de caracteres determinada de un texto determinada. Si eres de la muy vieja escuela y no te importa recalentar la comida en el microondas quizá pienses que lo mejor es crear un método propio para trabajar a tu gusto pero no. Aunque loable desde luego no es la mejor opción y existen otros métodos que ahora veremos.

En este tutorial de JavaScript hablaremos de cómo usar el método de cadena (string) llamado substring(), su sintaxis, ejemplos y también hablaremos de sus alternativas más populares.

 

Descubriendo substring()

 

En JavaScript, substring() es un método para extraer una subcadena de texto de una cadena más grande, dadas las posiciones inicial y final dentro de la cadena. Debido a que el método substring() es un método del objeto String, debe invocarse a través de una instancia particular de su clase. Suena un poco a rollo pero en realidad es muy sencillo si echamos un vistazo a su sintaxis:

    
        
string.substring(start_position [, end_position]);

    

 

Tenemos que prestar atención a los parámetros que se mencionan. En realidad se trata de establecer un índice de inicio y fin en donde start_position se refiere a la posición en donde se inicia el método, recuerda que comenzaremos a contar la primera posición en 0, y end_position se refiere a la posición donde la extracción finaliza (sin ser incluida), siendo esto opcional.

 

Por ejemplo:

    
        var cadena = 'Hola Mundo”;
cadena.substring(0,2); // Resulta “Ho”

    

 

Al omitirse el parámetro fin, entonces se tomará como índice de fin la longitud de la cadena.

 

    
        cadena.substring(5); // Resulta “Mundo”
    

 

Como curiosidad, si los parámetros de inicio y fin son iguales, entonces nos devolverá una cadena vacía, veamos:

 

    
        cadena.substring(2,2); // Resulta “”
    

 

Del mismo modo, si el parámetro inicio es mayor al de finalización entonces el método los invertirá.

 

    
        dato.substring(10, 5); // Resulta "Mundo" 
    

 

Tampoco debemos preocuparnos si definimos un índice de fin fuera de rango. Si el parámetro es mayor a la longitud de la cadena, entonces se tomará el final de la cadena.

 

    
        dato.substring(5, 55); // Resulta "Mundo" 
    

 

Y ya por último, otra característica del método substring es que no modifica la cadena original.

 

Veamos ahora algunos ejemplos de uso.

 

Ejemplos prácticos:

 

El siguiente ejemplo, es un repaso de lo anterior, usando substring para mostrar caracteres de la cadena "Patatas":

    
        // asume una función print ya definida 
var cualquierCadena = "Patatas"; 
// Muestra "Pat"
console.log(cualquierCadena.substring(0,3)); console.log(cualquierCadena.substring(3,0)); 

// Muestra "tas" 
console.log(cualquierCadena.substring(4,7)); console.log(cualquierCadena.substring(7,4)); 

// Muestra "Patata" 
console.log(cualquierCadena.substring(0,6)); console.log(cualquierCadena.substring(6,0)); 

// Muestra "Patatas" 
console.log(cualquierCadena.substring(0,7)); console.log(cualquierCadena.substring(0,10));
    

 

Ejemplo: Utilizando un bucle for, rizando un poco más el rizo para mostrar las posibilidades que ofrece este método.

 

    
        var cadena = 'Hola comunidad IfGeekThen';
for (var i = 0 ; i < cadena.length ; i++){
console.log( cadena.substring(i, (cadena.length)) );
}

/** Muestra: 
Hola comunidad IfGeekThen
ola comunidad IfGeekThen
la comunidad IfGeekThen
a comunidad IfGeekThen
 comunidad IfGeekThen
comunidad IfGeekThen
omunidad IfGeekThen
munidad IfGeekThen
unidad IfGeekThen
nidad IfGeekThen
idad IfGeekThen
dad IfGeekThen
ad IfGeekThen
d IfGeekThen
IfGeekThen
fGeekThen
GeekThen
eekThen
ekThen
kThen
Then
hen
en
n */

    

 

Ejemplo: Reemplazar una subcadena dentro de una cadena. Y ya por último vamos a ver cómo reemplazar una porción de texto dentro de una cadena mediante el siguiente ejemplo. Como resultado veremos como la cadena "Bravo Nuevo Mundo" cambia su orden por "Bravo Nueva Web".

 

    
        function reemplazarCadena(cadenaVieja, cadenaNueva, cadenaCompleta) {
// Reemplaza cadenaVieja por cadenaNueva en cadenaCompleta

   for (var i = 0; i < cadenaCompleta.length; i++) {
      if (cadenaCompleta.substring(i, i + cadenaVieja.length) == cadenaVieja) {
         cadenaCompleta= cadenaCompleta.substring(0, i) + cadenaNueva + cadenaCompleta.substring(i + cadenaVieja.length, cadenaCompleta.length);
      }
   }
   return cadenaCompleta;
}

reemplazarCadena("Mundo", "Web", "Bravo Nuevo Mundo");

    


Diferencias entre substr() y slice()

Por supuesto existen otros métodos para manipular cadenas como son substr y slice.


  • El método slice()

    El método slice() es idéntico a substring(), es decir, extrae una cadena desde el indice Inicio hasta el índice final. Al igual que en el método substring() el parámetro final es opcional y si se omite extrae hasta el final:

               
                   var cadena = "Hola Mundo";
    
    cadena.slice(2,6) // Resulta "la M"
    cadena.slice(5)  // Resulta  "Mundo"
    
               
           


    La diferencia es cuando usamos parámetros negativos, en ese caso se empieza a contar desde el final.

                
               cadena.slice(-6,8) // Resulta " Mun"
    cadena.slice(5,-3) // Resulta "Mu"
    
               
           


    Por ejemplo, si queremos omitir el primer y el último carácter de un texto:

               
                   
                   cadena.slice(1,-1) // Resulta "ola Mundo"
               
           


    Omitir solo los tres últimos caracteres

               
                   cadena.slice(0,-3) // Resulta "Hola Mu"
                   
               
           


    O, por ejemplo, extraer solo los últimos cuatro caracteres:

               
                   cadena.slice(-4) // Resulta "undo"
               
           
  • Método .substr()

    Este método usa el primer parámetro Inicio como índice, pero el segundo como cantidad de caracteres. Por ejemplo, si queremos los cuatro primeros caracteres de un texto:

               
                   cadena.substr(0,4) // Resulta "Hola"
    
               
           


    O si queremos extraer tres caracteres empezando del segundo:

               
                   cadena.substr(1,3) // Resulta "ola"
               
           


    Si el índice Inicio es negativo se empieza a contar desde el final:

          
              cadena.substr(-5,2) // Resulta "Mu"
          
      


    Si Inicio es negativo y mayor al número de caracteres del texto se tomará como cero. Si Final es negativo devolverá un string vacío.

          
              cadena.substr(-25,2) // Resulta "Ho"
          
      

 

Conclusiones

 

Cuando programamos nos vamos a encontraremos con frecuencia ocasiones en las que necesitaremos manipular texto. Ya sea para extraer los datos de un formulario, encontrar fragmentos de URL, validar campos, separar nombre y apellidos, etc. Para evitarnos dolores de cabeza Javascript cuenta con diferentes métodos que nos hacen la vida más fácil.

Hay que tener en cuenta que en JavaScript los valores primitivos no se modifican. Dicho e otro modo, estos métodos nunca modifican al string original sino que devuelven uno nuevo, lo que nos obliga a almacenarlo en una nueva variable o sobrescribir la que ya tenemos.

Si quieres aprender más de JavaScript te recomiendo descargar nuestro ebook  “La guía definitiva para ser un profesional JavaScript” en donde encontrarás información y recursos para poder formarte como desarrollador web especializado en JavaScript. ¿A qué estás esperando? :)