Hay dos conceptos muy importantes relacionados con todo de lo que hablaremos en este artículo, y son los conceptos substring y posición. Aunque son bastante autoexplicativos, vamos a definirlos.
Un substring es un fragmento más pequeño que forma parte de un
. También se suele hacer referencia a ellos como subcadena o subcadena de texto. Una posición (o índice) es un
que representa el lugar donde está ubicado un substring, teniendo en cuenta que se empieza a contar en 0
. Así pues, la primera letra deltendría el índice 0
, la segunda1
, la tercera2
, etc...
Un ejemplo para entenderlo mejor:
"Hola amigos" // "amigos" es un substring
"Hola amigos" // la posición o índice de "amigos" es 5
^0123456789
Ahora que tenemos claros estos dos conceptos, vamos a profundizar en métodos que los utilizan.
Obtener posición o índice
Existen varios métodos que permiten darnos información sobre la posición o ubicación que ocupa un determinado carácter o texto. Como ya hemos mencionado, esta posición también suele denominarse índice. Veamos detalladamente dichos métodos:
Método | Descripción |
---|---|
.charAt(pos) | Devuelve el carácter de la posición pos . Similar al operador [] . |
.indexOf(text) | Devuelve la primera posición del texto text . |
.indexOf(text, from) | Idem al anterior, partiendo desde la posición from . |
.lastIndexOf(text) | Devuelve la última posición del texto text . |
.lastIndexOf(text, from) | Idem al anterior, partiendo desde from hacia el inicio. |
Carácter en cierta posición
El método .charAt(pos)
nos permite comprobar que carácter se encuentra en la posición pos
del texto. Este método devolverá un pos
es 0
, por lo que si se omite el parámetro, obtendrá el primer elemento.
No obstante, es preferible utilizar el operador []
para obtener el carácter que ocupa una posición, ya que es más corto y rápido de utilizar y mucho más claro.
const name = "Manz";
// Utilizando .charAt
name.charAt(); // 'M'
name.charAt(0); // 'M'
name.charAt(1); // 'a'
name.charAt(10); // ''
// Utilizando operador []
name[]; // ERROR
name[0]; // 'M'
name[1]; // 'a'
name[10]; // undefined
Observa que la diferencia de
.charAt()
y el operador[]
, es que para posiciones donde no existe ningún carácter, el primero devuelve""
(cadena de texto vacía) mientras que el segundo devuelve.
Posición de cierto carácter
El método .indexOf(text, from)
realiza la función «opuesta» a charAt()
. El método .indexOf(text)
buscará el subtexto text
en nuestro -1
. El parámetro from
es opcional, y es la posición en la que empezará a buscar, que si no se suministra, es 0
.
const phrase = "LenguajeJS, página de Javascript";
phrase.indexOf("n"); // 2
phrase.indexOf("n", 3); // 16
phrase.indexOf("n", 17); // -1
Posición desde el final
El método lastIndexOf(text, from)
funciona exactamente igual que el anterior, sólo que realiza la búsqueda partiendo desde el final de la cadena de texto hacia el principio, de modo que busca primero las últimas apariciones, en lugar de las primeras:
const phrase = "LenguajeJS, página de Javascript";
phrase.lastIndexOf("n"); // 16
phrase.lastIndexOf("n", 3); // 2
phrase.lastIndexOf("n", 1); // -1
De la misma forma, se devuelve -1
si no encuentra la ocurrencia, y el parámetro from
es opcional, de indicarlo, se comenzará a buscar desde esa posición, hacia el principio del
Obtener fragmentos (substrings)
Javascript también posee una serie de métodos mediante los cuales podemos crear substrings formados por un fragmento del
Método | Descripción |
---|---|
.repeat(num) | Devuelve el num veces. |
.substring(start, end) | Devuelve el substring desde la posición start hasta end . |
.substr(start, size) | Devuelve el substring desde la posición start hasta start+size . |
.slice(start, end) | Idem a .substr() con leves diferencias. |
Repetir cadena de texto
Mediante el método .repeat()
puedes repetir el texto del
const text = "Jamón";
text.repeat(4); // "JamónJamónJamónJamón"
text.repeat(1); // "Jamón"
text.repeat(0); // ""
text.repeat(-1); // ERROR (Valor negativo)
Fragmento de texto (substring)
Otras de las operaciones fundamentales de los substring()
o el método substr()
.
El método
substring(start, end)
devuelve uncon el fragmento de texto desde la posición start
hasta la posiciónend
. Si se omite el parámetroend
, el subtexto abarcará desdestart
hasta el final.El método
substr(start, size)
devuelve uncon el fragmento de texto desde la posición start
, hasta la posiciónstart+size
. Dicho de otra forma,size
será el tamaño delresultante. En el caso de omitirse el parámetro size
, se devuelve hasta el final.
Veamos un ejemplo ilustrativo:
const text = "Submarino";
text.substring(3); // 'marino' (desde el 3 en adelante)
text.substring(3, 5); // 'ma' (desde el 3, hasta el 5)
text.substr(3); // 'marino' (desde el 3 en adelante)
text.substr(3, 5); // 'marin' (desde el 3, hasta el 3+5)
text.substr(-3); // 'ino' (desde la posición 3 desde el final, en adelante)
text.substr(-3, 2); // 'in' (desde la posición 3 desde el final, hasta 2 posiciones más)
Observa que el método .substr()
con un valor negativo en su primer parámetro start
, empieza a contar desde el final. Esto es algo que no ocurre con el método .substring()
.
Dividir un texto en partes (array)
Un método muy útil y versátil es .split(text)
. Permite dividir un text
utilizándolo como separador las veces que haga falta. Como resultado, devolverá un
Método | Descripción |
---|---|
.split(text) | Separa el texto en varias partes, usando text como separador. |
.split(text, limit) | Idem, pero crea como máximo limit fragmentos. |
.split(regexp) | Separa el texto usando la regexp como separador. |
.split(regexp, limit) | Idem, pero crea como máximo limit fragmentos. |
Veamos algunos ejemplos indicando un
"88.12.44.123".split("."); // ["88", "12", "44", "123"] (4 elementos)
"1.2.3.4.5".split("."); // ["1", "2", "3", "4", "5"] (5 elementos)
"Hola a todos".split(" "); // ["Hola", "a", "todos"] (3 elementos)
"A,B,C,D,E".split(",", 3); // ["A", "B", "C"] (limitado a los 3 primeros elementos)
"Código".split(""); // ["C", "ó", "d", "i", "g", "o"] (6 elementos)
Observa que en el último ejemplo, el separador es una cadena vacía, es decir, «separar por la unidad más pequeña posible». Al indicar esto, .split()
realiza una división carácter por carácter.
Por otro lado, ten en cuenta que también es posible indicar una
// Separa tanto por punto como por coma
"88.12,44.123".split(/[.,]/); // ["88", "12", "44", "123"] (4 elementos)
En el tema de los arrays veremos un método llamado
.join()
que es justo el opuesto de.split()
. Si split separa unen varios y los guarda en un , join une varios elementos de un añadiéndole el separador indicado y lo convierte en .