Convertir texto a Mayúsculas JavaScript: Ejemplos completos

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.

Convertir texto a Mayúsculas JavaScript
Convertir texto a Mayúsculas JavaScript

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);
 })
})

Declaración en el HTML de la función.

Aquí vamos a declarar los elementos necesarios para que tal conversión se ejecute correctamente. Sin embargo, no tenemos que olvidarnos declarar la librería de jQuery para que pueda trabajar sin inconvenientes. Veamos un ejemplo.

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

Ejemplo completo de la declaración de la librería y los campos del formulario HTML.

<!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>

Tercera Forma: Convertir la inicial de la cadena en Mayúsculas.

En algunas ocasiones se pide tal cadena de texto y que transforme su primer carácter o letra en mayúsculas. Para lograr tal objetivo veremos el siguiente ejemplo.

Tenemos que definir la siguiente función en la cabecera de nuestro documento:

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

¿Qué hace la función “PrimeraLetraMayuscula” creada?

Lo que hace esta función llamada PrimeraLetraMayuscula(string) es convertir el primer carácter de una determinada cadena de texto a mayúscula. Sin embargo, si la primera letra ya estuviera en mayúsculas, se quedaría tal como está y no realizaría ningún cambio.

Ejemplo de uso de la función que hemos creado.

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

Explicación del anterior script.

Primeramente  convertiremos el contenido de la cadena a minúsculas mediante la función base de JavaScript toLowerCase(), y como segundo punto pasar esta cadena a nuestra función PrimeraLetraMayuscula(string), dejando así el primer carácter de la cadena en mayúsculas y lo demás en letras minúsculas.

CONCLUSIÓN

Como hemos podido apreciar en este artículo existe varias formas de realizar la conversión de mayúsculas a minúsculas  o viceversa, es decir de minúsculas a mayúsculas.

Vimos también, que podemos usar los lenguajes JavaScript y también jQuery para lograr tal propósito. Además, de implementar funciones para dinamizar nuestros script.

Su uso es muy recomendado, por ejemplo para almacenar en la base de datos y /o mostrarlo en nuestra página o sistema web.

Deja un comentario