Convertir texto a Mayúsculas JavaScript: Ejemplos completos

Convertir texto a Mayúsculas JavaScript y Minúsculas usando los lenguajes JavaScript y jQuery. Para convertir una cadena de texto en mayúsculas y minúsculas en JavaScript existe la función toLowerCase() para convertir a «minúsculas», y la función toUpperCase() para convertir a «mayúsculas», según sea el caso.

Además, podemos manejar funciones estructuradas para logra tal conversión de cadenas de una manera dinámica.

Convertir texto a Mayúsculas JavaScript: Ejemplos completos

A continuación, veremos las formas para convertir cadena o cadenas de texto de mayúsculas a minúsculas o viceversa.

Primera forma: Convertir texto a Mayúsculas JavaScript

A) Convertir cadena de texto a Mayúscula

En este ejemplo usaremos una variable donde almacenaremos el texto para ser procesada por la función «toUpperCase«. Para ser convertida en mayúscula en el momento que carga el navegador web.

cadena = 'Texto De Prueba';
cadena = cadena.toUpperCase();
document.write(cadena);

B) Convertir texto de minúsculas a mayúsculas usando prompt

En algunas ocasiones podemos utilizar la opción prompt para solicitar información y a la vez convertirlo en mayúscula al ser procesada por JavaScript.

var texto = prompt("Introduce el texto");
document.write(texto.toUpperCase());// Imprimira en mayuscula

C) Para convertir una cadena a minúsculas

Si deseamos realizar lo inverso, es decir de mayúsculas a minúsculas usando JavaScript podemos usar la siguiente función llamado «toLowerCase«. Veamos un ejemplo pequeño.

cadena = 'MI TEXTO DE PRUEBA';
cadena = cadena.toLowerCase();
document.write(cadena); // Imprimira "mi texto de prueba"

D) Usando prompt para convertir texto en minúsculas

También, podemos hacerlo usando la opción prompt, para realizar el mismo objetivo final.

var texto = prompt("Introduce el texto");
document.write(texto.toLowerCase());

Otras formas de conversión usando JavaScript

1) Convertir a mayúscula cuando escribes:

Para lograr tal objetivo usaremos la función de JavaScript llamado onKeyUp, esta función se ejecuta cuando se deja de digitar en el teclado.

Ahora tenemos que preparar una estructura para que la conversión se ejecute correctamente, usaremos la función toUpperCase() y convertiremos toda la cadena generada al digitar, y le dará un efecto que se hace carácter por carácter, ya que en cada evento del teclado y usando  onKeyUp() se ejecutara la función creada.

Si tenemos varios input podemos replicar este evento de conversión a mayúsculas y todo funcionara igual, sin ningún problema. Veamos un ejemplo de la función creada.

// Funcion JavaScript para la conversion a mayusculas
function mayusculas(e) {
    e.value = e.value.toUpperCase();
}

EL segundo punto es declarar la función creada dentro del input de nuestro formulario HTML. Veamos un ejemplo de implementación.

<form>
<input type="text" name="Nombres" onkeyup="mayusculas(this);">
<input type="text" name="Apellidos" onkeyup="mayusculas(this);">
</form>

Si lo ves un poco complicado aquí tenemos otro ejemplo más resumido y obtendremos el mismo resultado final. Por lo tanto, tenemos que agregar un ID a nuestro <input type='text'> y posteriormente  le aplicamos el siguiente atributo a nuestro input. Veamos el ejemplo terminado.

<input type="text" id="campo" onKeyUp="document.getElementById(this.id).value=document.getElementById(this.id).value.toUpperCase()">

Segunda Forma: Usando jQuery

Si estamos familiarizados con el lenguaje jQuery que es una variante mejorada de JavaScript. Aquí le explicamos como implementarlo paso a paso.

Ejemplo 01: Conversión directa con jQuery

EL uso de jQuery para realzar la conversión es casi similar. Veamos un ejemplo:

// Conviertir todos los textos de la etiqueta BODY a minúsculas
$('body').toLowerCase();

Si deseamos a mayúsculas usaremos el siguiente código.

// Conviertir todos los textos de la etiqueta BODY a minúsculas
$('body').toUpperCase();

Ejemplo 02: Usando función con  jQuery

Con el lenguaje jQuery puedes convertir a mayúsculas el texto de cualquier <input> o <textarea> de nuestro formularios HTML. Por lo tanto, vamos a probar el siguiente código e insertándolo en la etiqueta (<head>) del documento HTML:

$(document).ready( function () {
 $(".UpperCase").on("keypress", function () {
  $input=$(this);
  setTimeout(function () {
   $input.val($input.val().toUpperCase());
  },50);
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<title>Convertir a mayusculas y minusculas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready( function () {
 $(".UpperCase").on("keypress", function () {
  $input=$(this);
  setTimeout(function () {
   $input.val($input.val().toUpperCase());
  },50);
 })
})
</script>
</head>
<body>

<form>
 <h1>Datos del Cliente</h1>
 <pre>
  Codigo    <input name="codigo">
  Nombre    <input name="nombre" class="UpperCase">
  Dirección <input name="direccion">
  Teléfono  <input name="telefono">
  Ciudad     <input name="ciudad" class="UpperCase">
 </pre>
<form>
</body>
</html>

function PrimeraLetraMayuscula(string){
  return string.charAt(0).toUpperCase() + string.slice(1);
}

micadena= 'HOLA MUNDO'; // Cadena en mayusculas para ser transformada
micadena= PrimeraLetraMayuscula(micadena.toLowerCase()); // Usamos la funcion creada
document.write(micadena); // Imprimira: "Hola mundo" en el navegador