El método substring devuelve una subcadena de la cadena de texto, que hemos obtenido mediante los dos parámetros que especificamos: `inicio, final’. El segundo parámetro es opcional.
El número que indicamos en el primer parámetro, comienza a contar por el número 0 en adelante y el segundo parámetro que es opcional comienza desde el número 1. Para ver cómo funciona el método substring utilizaremos alert() para sacar una ventana de alerta por pantalla con la subcadena devuelta. Si le pasamos como primer parámetro un número negativo obtenemos la cadena de texto original.
<script type="text/javascript">
alert("JavaScript Substring".substring(0, 10));
</script>
Como podemos ver en el ejemplo, obtenemos la subcadena `JavaScript’ al poner el primer parámetro 0, nos saca la ` J ’ hasta el segundo parámetro 10 que nos marca ` t ’ por lo que, sale en pantalla `JavaScript ’.
Ahora bien, si indicamos en el primer parámetro 4 y el segundo parámetro 20 obtenemos la subcadena `Script Substing’.
<script type="text/javascript">
alert("JavaScript Substring".substring(4,20));
</script>
En el caso de que sólo indiquemos un parámetro será el inicio de la subcadena y obtenemos el primer carácter indicado hasta el final de la cadena.
<script type="text/javascript">
alert("JavaScript Substring".substring(11));
</script>
En este ejemplo obtenemos la subcadena `Substing’. En el siguiente ejemplo vamos a hacer una pequeña validación en el que sólo debe teclear la letra. Utilizaremos un formulario con dos input, tipo texto y botón, y un script donde llamaremos una función en donde tenemos un bucle for y un condicional.
Primero creamos un formulario en con dos input, uno para introducir un nombre donde tiene un id que identifica el mismo con el nombre de entrada. El siguiente input es tipo button y contiene el evento onclick, este evento entra en la acción cuando el usuario hace clic en el botón, al hacer clic en el botón llamamos a la función chequear ().
<input type="text" id="entrada" placeholder="Nombre" />
<input type="button" value=" Chequear " onclick="chequear()" />
Lo segundo que haremos es crear dentro de la etiqueta , una función con el nombre de chequear. Ahora, dentro de la función creamos dos variables i con el valor 1 y la variable e con el valor que tengo el input con el id entrada, para ello utilizamos “document.getElementById(‘ entrada ‘).value”.
function chequear()
{
var e = document.getElementById(' entrada ').value;
var i = 1;
}
A continuación creamos un bucle for donde le pasamos tres parámetro; en la primera le creamos una variable c, donde le asignamos 0, el segundo parámetro hacemos la condición que mientras c sea menor que la longitud de la variable e (esta variable contiene el nombre que introduce el usuario), y en el tercer parámetro ponemos c++ que es para incrementar la variable c cada vez que termina la iteración del bucle.
for (var c=0; c<e.length; c++)
{
}
Creamos en el bucle for c una variable caracter, donde introducimos ”e.substring(c,i)”; en el método Substring() obtenemos la subcadena de la variable e, que es el nombre e introducimos la variable c y i como parámetro. Lo último es hacer una condición. Si la variable carácter es menor que “a” o mayor que “z” que saque por pantalla el mensaje “Sólo se admite letras.” , hacemos un return para finalizar la sentencia y al salir de la condición ponemos i++ para incrementar la variable si la condición no se cumple.
var caracter = e.substring(c,i);
if (caracter"z")
{
alert("Sólo se admite letras.");
return;
}
i++;
Código completo.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ejemplo en donde utilizamos la propiedad Substring</title>
<script type="text/javascript">
function chequear()
{
var e = document.getElementById(' entrada ').value;
var i = 1;
for (var c=0; c<e.length; c++)
{
var caracter = e.substring(c,i);
if (caracter<"a" || caracter>"z")
{
alert("Solo se admite letras.");
return;
}
i++;
}
}
</script>
</head>
<body>
<form>
<input type="text" id="entrada" placeholder="Nombre" />
<input type="button" value=" Chequear " onclick="chequear()" />
</form>
</body>
</html>
