¡Palíndromos! ¿Palin... qué?

Paso 1

Lo primero que haremos en el código de JavaScript, será realizar una función a la cual llamaremos palindromo (sin acento) y por medio de un parámetro llamado cadena será la forma en que analizaremos las palabras o la oraciones.

Código JavaScript (paso 1)

function palindromo(cadena) {
 console.log(cadena);
}

palindromo("Ana");
// Devuelve como resultado: Ana
	
palindromo("Esto es una oración");
// Devuelve como resultado: Esto es una oración

Paso 2

Para el segundo paso, se crearán 2 variables: la primera se llamará resultado, que al final será la variable que devuelva si la cadena es palíndroma o no aunque de momento solo mostrará el valor del parámetro que marca en la función.

La segunda variable se llamará cadenaOriginal y convertirá las letras de la cadena a minúsculas.

Código JavaScript (paso 2)

function palindromo(cadena) {
  
  var resultado = cadena;
  console.log("resultado es igual a = "+resultado);
  
  // Pasar a minúsculas la cadena
  var cadenaOriginal = cadena.toLowerCase();
  console.log("cadena original a minúsculas = "+cadenaOriginal);
}

palindromo("Ana");
// Devuelve como resultado:
// resultado es igual a = Ana
// cadena original a minúsculas = ana

palindromo("Esto es una oración");
// Devuelve como resultado:
// resultado es igual a = Esto es una oración
// cadena original a minúsculas = esto es una oración

Paso 3

Lo siguiente es utilizar los métodos split() y join() a través de una nueva variable a la que llamaremos cadenaSinEspacios.

Básicamente esta variable lo que hará es que donde se encuentren espacios en la oración, los reemplazará con la eliminación de los mismos.

Código JavaScript (paso 3)

function palindromo(cadena) {
  
  var resultado = cadena;
  
  // Pasar a minúsculas la cadena
  var cadenaOriginal = cadena.toLowerCase();
  
  // Eliminar los espacios en las oraciones
  var cadenaSinEspacios = cadenaOriginal.split(" ").join(""); 
  console.log("eliminar los espacios en blanco = "+cadenaSinEspacios);
}

palindromo("Ana");
// Devuelve como resultado:
// eliminar los espacios en blanco = ana

palindromo("Esto es una oración");
// Devuelve como resultado:
// eliminar los espacios en blanco = estoesunaoración

Paso 4

En este paso se utilizarán otras 2 variables dentro de la función. La primera se llamará letras y la segunda letrasReves.

En la variable letras se utilizará de nuevo el método split() aplicado a la variable cadenaSinEspacios. Este método dividirá la cadena en subcadenas mediante el separador especificado (por defecto es una coma) y las devolverá como una matriz.

Por otro lado, con la variable letrasReves se hará lo mismo, aplicaremos el método split() a la variable cadenaSinEspacios e inmediatamente le aplicaremos el método reverse() que nos devolverá el valor de la cadena pero en sentido contrario.

Código JavaScript (paso 4)

function palindromo(cadena) {
  
  var resultado = cadena;
  
  // Pasar a minúsculas la cadena
  var cadenaOriginal = cadena.toLowerCase();

  // Eliminar los espacios en las oraciones
  var cadenaSinEspacios = cadenaOriginal.split(" ").join("");
 
  var letras = cadenaSinEspacios.split("");
  console.log("letras = "+letras);
    
  var letrasReves = cadenaSinEspacios.split("").reverse();
  console.log("letras al revés = "+letrasReves); 

}

palindromo("Ana");
// Devuelve como resultado:
// letras = a,n,a
// letras al revés = a,n,a

palindromo("Esto es una oración");
// Devuelve como resultado:
// letras = e,s,t,o,e,s,u,n,a,o,r,a,c,i,ó,n
// letras al revés = n,ó,i,c,a,r,o,a,n,u,s,e,o,t,s,e

Paso 5

Se utilizará un loop for para determinar si las palabras son palíndromas o no.

Para esto utilizaremos la comparación del índice entre las variables letras y letrasReves.

Mientras las letras o contenido sean iguales entre sí, el contenido será palíndromo. En el momento que no se cumpla o que sean diferentes en ese momento la palabra u oración dejará de serlo.

Código JavaScript (paso 5)

function palindromo(cadena) {
  
  var resultado = cadena;
  
  // Pasar a minúsculas la cadena
  var cadenaOriginal = cadena.toLowerCase();

  // Eliminar los espacios en las oraciones
  var cadenaSinEspacios = cadenaOriginal.split(" ").join("");
  
  var letras = cadenaSinEspacios.split("");
    
  var letrasReves = cadenaSinEspacios.split("").reverse();

  for(i in letras) {
    if(letras[i] != letrasReves[i]) {
	  // Alguna letra es distinta, por lo que ya no es un palíndromo
      console.log("Alguna letra es distinta");
    }
    else {
      // Todo bien es palíndroma
      console.log("Todo bien");
    }
  }
   
}

palindromo("Ana");
// Devuelve como resultado:
// Todo bien

palindromo("Esto es una oración");
// Devuelve como resultado:
// Alguna letra es distinta

Paso 6

Para el sexto paso, antes de modificar el código en JavaScript, para desplegar los resultados se crearán en el archivo de html que estemos utilizando dentro de la parte deluna caja de texto que tendrá un id que será fname y un párrafo que tendrá un id que será fresult.

Código HTML

<body>
<input type="text" id="fname" />
<p id="fresult"> </p>
</body>

Regresando al código en JavaScript, lo primero que se hará es eliminar el parámetro cadena de la función palindromo. El parámetro de cadena, se convertirá en una variable dentro de la función que obtendrá el valor del id fname. También se creará una nueva variable que se llamará iguales que será de tipo booleano (cierto/falso).

El estado inicial de esa variable será verdadero (true) y con la ayuda de condicionales (if y else) determinaremos finalmente el resultado.

Después se creará una variable más que se llamará inputBox. Esta variable estará fuera de la función palíndromo() y estará ligada a la caja de texto y detectará la letra soltada (después de teclear).

Código JavaScript (paso 6)

function palindromo(cadena) {
  
  var iguales = true;
  var cadena = document.getElementById("fname").value;
  
  var resultado = cadena;
  
  // Pasar a minúsculas la cadena
  var cadenaOriginal = cadena.toLowerCase();

  // Eliminar los espacios en las oraciones
  var cadenaSinEspacios = cadenaOriginal.split(" ").join("");
  
  var letras = cadenaSinEspacios.split("");
    
  var letrasReves = cadenaSinEspacios.split("").reverse();

  for(i in letras) {
    if(letras[i] != letrasReves[i]) {
      // Alguna letra es distinta, por lo que ya no es un palíndromo
      console.log("Alguna letra es distinta");
    }
    else {
	  // Todo bien es palíndroma
      console.log("Todo bien");
    }
  }
            
  if(cadena.length <= 2) {
   resultado = "<em>"+resultado+"</em><br /> <strong>Se necesitan al menos 3 letras, caracteres o números para hacer la comparación.</strong>";
   document.getElementById("fresult").innerHTML = resultado;
  } else if (iguales && cadena.length > 2){
   resultado = "<em>"+resultado+"</em><br /> <strong>¡Es un palíndromo!</strong>";
   document.getElementById("fresult").innerHTML = resultado; 
  } else if(!iguales && cadena.length > 2){
   resultado = "<em>"+resultado+"</em><br /> <strong>¡No es un palíndromo!</strong>";
   document.getElementById("fresult").innerHTML = resultado;
  }
   
}

var inputBox = document.getElementById("fname");
inputBox.addEventListener("keyup", palindromo);

Paso 7

Para mejorar la función palindromo(), lo que haré es crear una nueva función a la cuál llamaré limpiarCadenaDeTexto(). Esta función pasará un parámetro llamado cadena que será la palabra, número u oración a limpiar.

En esta función definimos los caracteres especiales que queremos eliminar a través de una variable que se llamará specialChars. Después a través de un loop y checando cada uno de los índices de la variable specialChars los eliminaremos.

Aquí mismo se le dirá a la variable cadena que todos sus caracteres se vuelvan minúscula y por último, aquellas vocales que lleven acento, le diremos que lo omitan (lo mismo con la ñ).

Una vez realizado esto, se regresará el valor de cadena de esta función.

Por otra parte, en la función palindromo() se cambiará el valor de la variable cadenaOriginal que en un principio convertía las letras a minúsculas y en su lugar aplicaremos la función limpiarCadenaDeTexto(cadena) para que se depure el contenido lo mejor posible.

Código JavaScript (paso 7)

function palindromo() {
  
  var iguales = true;
  var cadena = document.getElementById("fname").value;
  
  var resultado = cadena;
  
  var cadenaOriginal = cadena.toLowerCase();
  var cadenaOriginal = limpiarCadenaDeTexto(cadena);


  // Eliminar los espacios en las oraciones
  var cadenaSinEspacios = cadenaOriginal.split(" ").join("");
  
  var letras = cadenaSinEspacios.split("");
    
  var letrasReves = cadenaSinEspacios.split("").reverse();

  for(i in letras) {
    if(letras[i] != letrasReves[i]) {
      // Alguna letra es distinta, por lo que ya no es un palíndromo
      console.log("Alguna letra es distinta");
    }
    else {
	  // Todo bien es palíndroma
      console.log("Todo bien");
    }
  }
            
  if(cadena.length <= 2) {
   resultado = "<em>"+resultado+"</em><br /> <strong>Se necesitan al menos 3 letras, caracteres o números para hacer la comparación.</strong>";
   document.getElementById("fresult").innerHTML = resultado;
  } else if (iguales && cadena.length > 2){
   resultado = "<em>"+resultado+"</em><br /> <strong>¡Es un palíndromo!</strong>";
   document.getElementById("fresult").innerHTML = resultado; 
  } else if(!iguales && cadena.length > 2){
   resultado = "<em>"+resultado+"</em><br /> <strong>¡No es un palíndromo!</strong>";
   document.getElementById("fresult").innerHTML = resultado;
  }
   
}

var inputBox = document.getElementById("fname");
inputBox.addEventListener("keyup", palindromo);

 function limpiarCadenaDeTexto(cadena){

  // Definimos los caracteres especiales que queremos eliminar
  var specialChars = "¡!@#$^&%*()+=-[]\/{}|:<>¿?,.";

  // Los eliminamos todos
  for (var i = 0; i < specialChars.length; i++) {
    cadena= cadena.replace(new RegExp("\\" + specialChars[i], 'gi'), '');
  }   

  // Lo queremos devolver limpio en minúsculas
  cadena = cadena.toLowerCase();

  // Quitamos acentos y "ñ". Hay que fijarse en que va sin comillas el primer parametro
  cadena = cadena.replace(/á/gi,"a");
  cadena = cadena.replace(/é/gi,"e");
  cadena = cadena.replace(/í/gi,"i");
  cadena = cadena.replace(/ó/gi,"o");
  cadena = cadena.replace(/ú/gi,"u");
  cadena = cadena.replace(/ñ/gi,"n");
            
  return cadena;
  }