Métodos String Javascript

Los métodos string Javascript nos ayudan a trabajar con strings.

Lo métodos que vamos a ver son:

Propiedades y métodos de string

Los valores primitivos como “John Doe” no tienen propiedades ni métodos (porque no son objetos). Pero con Javascript, los métodos y propiedades están siempre disponibles a valores primitivos, porque Javascript trata los valores primitivos como objetos cuando ejecutamos métodos y propiedades.

Tamaño de string

La propiedad length devuelve el tamaño de un string.

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Tamaño de un string</h2>
        <p id="demo"></p>
        
        <script>
			var x = "abcdefg";
			document.getElementById("demo").innerHTML=x.length;
		</script>
    </body>
</html>

indexOf()

El método indexOf() devuelve el índice de (la posición de) la primera aparición de un texto especificado en una cadena.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos String Javascript</h2>	
	<p>El método indexOf() devuelve la posición de la primera ocurrencia de un texto específico</p>

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

	<script>
		var str="Porfavor, localiza la palabra 'localiza'";
		var pos=str.indexOf("localiza");
		document.getElementById("demo").innerHTML=pos;
	</script>
</body>
</html>

JavaScript cuenta las posiciones desde cero. 0 es la primera posición en una cadena, 1 es la segunda, 2 es la tercera …

lastIndexOf()

El método lastIndexOf() devuelve el índice de la última aparición de un texto especificado en una cadena.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos string Javascript</h2>	
	<p>El método lastIndexOf() devuelve la posición de la última ocurrencia de un texto específico</p>

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

	<script>
		var str = "Porfavor localiza la palabra 'localiza'";
		var pos = str.lastIndexOf("localiza");
		document.getElementById("demo").innerHTML = pos;
	</script>
</body>
</html>

Tanto indexOf() como lastIndexOf() devuelven -1 si no se encuentra el texto. Ambos métodos aceptan un segundo parámetro como la posición inicial para la búsqueda.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>

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

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

El método lastIndexOf() busca hacia atrás (desde el final hasta el principio), lo que significa: si el segundo parámetro es 15, la búsqueda comienza en la posición 15 y busca hasta el comienzo de la cadena.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>
<p>Position 15 is position 15 from the beginning.</p>

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

<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

El método search() busca un string para un valor específico y devuelve la posición de la coincidencia.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos string Javascript</h2>	
	<p>El método search() devuelve la posición de la primera coincidencia para un texto específico en un string</p>

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

	<script>
	var str = "Localiza la posición de la palabra 'Localiza'";
	var pos = str.search("Localiza");
	document.getElementById("demo").innerHTML = pos;
	</script>
</body>
</html>

Si te fijas

Los dos métodos, indexOf() y search() son iguales?. Aceptan los mismos argumentos (parámetros) y devuelven el mismo valor, pero NO son iguales.

  • El método search() no puede tomar un segundo argumento de posición de inicio.
  • El método indexOf() no puede tomar valores de búsqueda potentes (expresiones regulares).

Aprenderemos más acerca de expresiones regulares en capítulos posteriores.

Extraer partes de strings

Existen 3 métodos para extraer una parte de un string.

  • slice(start, end)
  • substring(start, end)
  • substrato(start, length)

El método slice()

El método slice() extrae parte de un string y devuelve la parte extraída en un nuevo string. El método consta de 2 parámetros, la posición de inicio y la posición de fin (sin incluir el mismo). El siguientes ejemplo corta una porción de una cadena desde la posición 7 a la posición 12 (13-1).

Ejm

<!DOCTYPE html>
<html lang="es">
	<h2>Métodos string Javascript</h2>
	<p>El método slice() toma una porción de un string
        de un string y devuelve la parte extraída</p>

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

	<script>
		var str = "manzana, pera, naranja";
		var res = str.slice(9,13);
		document.getElementById("demo").innerHTML = res;
	</script>
</html>

Recuerda que Javascript cuenta las posiciones desde cero. La primera posición es cero. Si el parámetro es negativo, la posición será contada desde el final del string. Este ejemplo corta una porción de una cadena desde la posición -12 a la posición -6.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos string Javascript</h2>	
	<p>El método slice() devuelve un fragmento de cadena de una cadena</p>

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

	<script>
		var str = "pera, manzana, naranja";
		var res = str.slice(-10,-3);
		document.getElementById("demo").innerHTML = res;
	</script>
</body>
</html>

Si se omite el segundo parámetro se devolverá el resto del string.

Ejm

var res = str.slice(7);

O contando desde el final.

Ejm

var res = str.slice(-12);

Las posiciones negativas no funcionan en Internet Explorer 8 y versiones anteriores.

El método substring()

substring() es similar a slice(), la diferencia es que substring() no acepta valores negativos.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos string Javascript</h2>	
	<p>El método substring() es similar al método slice(), pero no acepta
	valores negativos</p>

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

	<script>
		var str = "manzana, pera, banana";
		var res = str.substr(4,5);
		document.getElementById("demo").innerHTML = res;
	</script>
</body>
</html>

Si omites el segundo parámetro, substring() cortará el resto de la cadena.

El método substr()

substr() es similar a slice(), la diferencia es que el segundo parámetro especifica la longitud de la parte extraída.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

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

<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7,6);
document.getElementById("demo").innerHTML = res;
</script>

</body>
</html>

Si omite el segundo parámetro, substr () cortará el resto de la cadena. Si el primer parámetro es negativo, la posición contará desde el final del string.

Reemplazando contenido con replace()

El método replace() reemplaza un valor específico con otro valor en un string.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos string Javascript</h2>	
	<p>Reemplaza Microsoft por Websarrolladores en el párrafo de más abajo</p>

	<button type="button" onClick="myFunction()">Haz clic</button>

	<p id="demo">Bienvenidos a Microsoft</p>

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

El método replace() no cambia la cadena en la que se invoca. Devuelve una nueva cadena. Por defecto, el método replace() reemplaza solo la primera coincidencia. También por defecto, el método replace() distingue entre mayúsculas y minúsculas. Escribir MICROSOFT (con mayúsculas) no funcionará. Para reemplazar mayúsculas y minúsculas, usaremos una expresión regular con un indicador / i (insensitive).

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Métodos string Javascript</h2>	
	<p>Reemplazar Microsoft por Websarrolladores en el párrafo de más abajo</p>

	<button onClick="myFunction()">Haz clic</button>

	<p id="demo">Bienvenidos a 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>

Tenga en cuenta que las expresiones regulares se escriben sin comillas.

Convertir a mayúsculas con toUpperCase()

Una cadena se convierte en mayúsculas con toUpperCase().

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<p>Transformar string en mayúsculas (uppercase)</p>	
	<button onClick="myFunction()">Haz clic</button>
	<p id="demo">Hola Mundo</p>

	<script>
		function myFunction()
		{
			var str = document.getElementById("demo").innerHTML;
			document.getElementById("demo").innerHTML = str.toUpperCase();
		}
	</script>
</body>
</html>

Convertir a minúsculas toLowerCase()

Una cadena se convierte en minúsculas con toLowerCase().

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<p>Transformar texto en minúsculas</p>	
	<button onClick="myFunction()">Haz clic</button>
	<p id="demo">Hola Mundo</p>

	<script>
		function myFunction()
		{
			var str = document.getElementById("demo").innerHTML;
			document.getElementById("demo").innerHTML = str.toLocaleLowerCase();
		}
	</script>
</body>
</html>

El método concat()

El método concat() une dos o más strings.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<p id="demo"></p>	

	<script>
		var txt1 = "Hello";
		var txt2 = "World";
		var txt3 = txt1 + " " + txt2;
		document.getElementById("demo").innerHTML = txt3;
	</script>
</body>
</html>

El método concat() se puede utilizar en lugar del operador más. Estas dos líneas hacen lo mismo:

Ejm

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ""World!");

Todos los métodos de cadena devuelven una nueva cadena. No modifican la cadena original. Dicho formalmente, las cadenas son inmutables: las cadenas no se pueden cambiar, solo se pueden reemplazar.

String.trim()

El método trim() elimina los espacios en blanco de ambos lados de una cadena.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h2>Javascript string.trim()</h2>	
	<p>Haz clic en el botón para mostrar el string
        con el espacio en blanco removido</p>
	<button onClick="myFunction()">Haz clic</button>

	<p><strong>Nota: </strong>El método trim() no es soportado por 
	Internet Explorer 8 y más antiguos</p>

	<script>
		function myFunction()
		{
			var str = "     Hello World";
			alert(str.trim());
		}
	</script>
</body>
</html>

El método trim() no es soportado en IE Explorer 8 y anteriores. Si necesitas admitir IE 8, puede usar replace() con una expresión regular en su lugar.

Ejm

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

También puedes usar la solución de reemplazo anterior para agregar una función de recorte al JavaScript String.prototype.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String.trim()</h2>

<p>IE 8 does not support String.trim(). To trim a string you can use a polyfill.</p>

<script>
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
var str = "     Hello World!    ";
alert(str.trim());
</script>

</body>
</html>

Extraer caracteres de cadena

Hay 3 métodos para extraer caracteres:

  • charAt(posición)
  • charCodeAt(posición)
  • Property Access []

El método charAt()

El método charAt() devuelve el carácter en un índice (posición) especificado en una cadena.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<p>Métodos string Javascript</p>	
	<p>El método charAt() devuelve el carácter de la posición tomada en un string </p>
	<p id="demo"></p>

	<script>
		var str = "HELLO WORLD";
		document.getElementById("demo").innerHTML = str.charAt(0);
	</script>
</body>
</html>

El método charCodeAt()

El método charCodeAt() devuelve el código unicode del carácter en un índice especificado en una cadena:

El método devuelve un código UTF-16 (un entero entre 0 y 65535).

Ejm

<!DOCTYPE html>
<html>
<body>

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>

<p id=”demo”></p>

<script>
var str = “HELLO WORLD”;
document.getElementById(“demo”).innerHTML = str.charCodeAt(0);
</script>

</body>
</html>

Property Access []

ECMAScript 5 (2009) permite el acceso a la propiedad [] en cadenas.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property access on strings:</p>

<p id=”demo”></p>

<script>
var str = “HELLO WORLD”;
document.getElementById(“demo”).innerHTML = str[0];
</script>
</body>
</html>

El acceso a la propiedad puede ser un poco impredecible:

  • No trabaja con IE Explorer 7 y anteriores
  • Hace que las cadenas se vean como matrices (pero no lo son)
  • Si no se encuentra ningún carácter, [] devuelve indefinido, mientras que charAt() devuelve una cadena vacía.
  • Es de solo lectura. str[0] = “A” no da ningún error (¡pero no funciona!)

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>ECMAScript 5 allows property acces on strings. but read only:</p>

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

<script>
var str = "HELLO WORLD";
str[0] = "A";  // Does not work
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

Si desea trabajar con una cadena como una matriz, puede convertirla en una matriz.

Convertir un string en un array

Un string puede ser convertido en un array mediante el método split().

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<p>Haga clic en "Haz Clic" para mostrar el primer elemento de la matriz, después de una división de cadena.</p>	
	<button onClick="myFunction()">Haz Clic</button>
	<p id="demo"></p>

	<script>
		function myFunction()
		{
			var str = "a,b,c,d,e,f,g";
			var arr = str.split(",");
			document.getElementById("demo").innerHTML = arr[0];
		}
	</script>
</body>
</html>

Si se omite el separador, la matriz devuelta contendrá la cadena completa en el índice [0]. Si el separador es “”, la matriz devuelta será una matriz de caracteres individuales.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<p id="demo"></p>	

	<script>
		var str = "Hola que tal";
		var arr = str.split("");
		var text = "";
		var i;

		for(i=0;i<arr.length;i++)
			{
				text += arr[i] + "<br />";
			}
		document.getElementById("demo").innerHTML = text;
	</script>
</body>
</html>