Es habitual en javaScript encontrarnos con el problema de saber si una cadena de caracteres representa un número, bien sea entero o decimal. La resolución de este problema en este artículo está basada en la combinación del uso de una expresión regular junto al algoritmo javaScript necesario que valide o no la cadena como entrada numérica.
Expresión regular
La expresión regular que utilizamos es /^[0-9]+$/ y con ella lo que intentamos saber es si la cadena que intentamos validar contiene solo caracteres exclusivamente numéricos. Si analizamos esta expresión obtenemos que la expresión va delimitada por el carácter ‘/’ tanto al inicio como al final. Es importante saber que se pueden usar otros alternativos como delimitadores como pueden ser ( ), { },[ ], < >, o bien # tanto para el delimitador de inicio como el del final, ejemplo: #^[0-9]+$#
Más allá del delimitador nos encontramos con la propia expresión que comienza con el acento circunflejo ‘^’ y cuyo significado, en este caso, es el comienzo de la cadena. La expresión finaliza con ‘$’ que significa el final de la cadena. A continuación y después del cincunflejo nos encontramos con una clase de caracteres, entre corchetes. Significa, por tanto [0-9], que se aceptan caracteres del 0 al 9 y para finalizar nos encontramos con el signo + cuyo significado es que lo anterior debe estar presente al menos una vez.
Por tanto, y hablando en general de expresiones regulares, /^[0-9]+$/ significa que será valida la cadena que tenga desde el principio hasta el final (da igual la longitud) caracteres comprendidos entre 0 y 9 y que al menos haya 1. Si no existe cadena (vacía) no será válida y obviamente la existencia de una letra o carácter especial, tampoco dará como verdadero o válido.
Visto esto, y en combinación con javaScript, podemos evaluar cualquier cadena de caracteres para saber si corresponde con la existencia solo de números a partir de un carácter.
<script>
var dato_a_comprobar = "1234";
var valoresAceptados = /^[0-9]+$/;
if (dato.match(valoresAceptados)){
alert ("Es numérico");
} else {
alert ("No es numérico");
}
</script>
Desde la perspectiva de nuestro problema original no solo es numérico un número entero sino también un número fraccional, con decimales. Para resolver este problema usando el script anterior, y para el caso de tener dos partes numéricas separadas con un punto, nos vemos obligados a hacer una doble comprobación.
Comprobar si una cadena con punto y decimales representa un número
El problema radica en poder comprobar en javaScript si una cadena de caracteres del tipo ‘35.34’ que es de tipo texto, puesto que la entrada se hará desde teclado con la etiqueta <input type=»text» … >, puede validarse como numérico. Pare ello, el procedimiento que seguiremos es el siguiente:
- Buscar el punto decimal en la cadena. Si no existe puede tratarse de un número entero por lo que habrá que evaluarlo igualmente.
- Si existe el punto decimal se realiza una separación de ambas partes excluyendo al propio punto decimal para evaluarlas por separado.
- Crear una función llamada esNumero (dato) que devuelva verdadero o falso.
Observe la siguiente aplicación completa:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validar con input en javaScript</title>
<style>
#contenedor {
width: 50%;
padding:20px;
border: 2px solid black;
background-color: #fafafa;
margin:auto;
}
</style>
<script>
function validar (){
dato= document.getElementById("dato").value;
resultado = document.getElementById("resultado");
if (dato == ""){
resultado.innerText = "No existe cadena de caracteres para evaluar";
}else{
if (esNumero (dato)){
resultado.innerText = ("La cadena de caracteres es NUMÉRICA: " + parseFloat(dato).toFixed(2));
}else{
resultado.innerText = ("La cadena de caracteres NO es NUMÉRICA");
}
}
}
function esNumero (dato){
/*Definición de los valores aceptados*/
var valoresAceptados = /^[0-9]+$/;
if (dato.indexOf(".") === -1 ){
if (dato.match(valoresAceptados)){
return true;
}else{
return false;
}
}else{
//dividir la expresión por el punto en un array
var particion = dato.split(".");
//evaluamos la primera parte de la división (parte entera)
if (particion[0].match(valoresAceptados) || particion[0]==""){
if (particion[1].match(valoresAceptados)){
return true;
}else {
return false;
}
}else{
return false;
}
}
}
function historyBack(){
window.history.back();
}
</script>
</head>
<body>
<div id="contenedor">
<label for="">Expresión a validar</label>
<input type="text" id="dato" size="10" value="">
<p>
<button id="boton" onclick="validar()">Evaluar</button>
</p>
<p id="resultado">Resultado</p>
<input type="button" id="boton" value="Volver a la pagina anterior" onclick="historyBack()" />
</div>
</body>
</html>
Simplificación del problema
La siguiente expresión regular permite simplificar el desarrollo en la programación. La expresión regular es /^[0-9]*(\.?)[0-9]+$/.
Este expresión regular permite localizar cadenas que comiencen con o sin número o números seguido de uno o sin punto y seguido en la parte final de la cadena de al menos un número.
^ -> indica que es el principio de la cadena ; $ -> se refiere a que corresponde el final de la cadena
* -> es una indicación de repetición con significado de ninguna vez, una o varias, en nuestro caso de números.
? -> es una indicación de repetición que significa que una o ninguna vez.
+ -> indica repetición y significa al menos una vez o más.
Por lo tanto esta expresión regular debe dar como válidos los siguientes literales de caracteres: «.21», «23» o «23.45» y debe dar error si existe en la cadena cualquier letra o caracteres especiales así como si se introducen dos puntos en la cadena de caracteres. Puede probar la expresión en esta plataforma.
Otras expresiones regulares
- Control de caracteres alfabéticos: /^[a-zA-Z]+$/ (con esta expresión se aceptan únicamente las letras del alfabeto, mayúsculas y minúsculas).
- Control de caracteres alfabéticos y numéricos: /^[0-9a-zA-Z]+$/
- Control de entrada de datos en una dirección de correo electrónico: /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/
Métodos de javaScript: indexOf ( ), parseFloat ( ), toFixed ( ), match ( ), history.back ( ), split ( )
Eventos de javaScript: onclick ( )
Argumentos de javaScript: innerText
