Convertir MAYÚSCULAS con JavaScript y jQuery

Convertir MAYÚSCULAS con JavaScript y jQuery. La ortografía en desarrollo de sistemas y páginas web es muy importante y justamente para ello hemos preparado un artículo que nos brindara esas herramientas para poder convertir una cadena de texto en mayúscula solo el primer carácter.

Para lograr tal cometido usaremos el lenguaje JavaScript que trabaja al lado del navegador y con ello podemos transformar las letras de un texto ingresado en un texto capitalizado en solo la primera letra de todo el texto.

Convertir MAYÚSCULAS con JavaScript y jQuery

Ahora tenemos una cadena de texto en JavaScript, vamos a convertir su primer carácter o letra en mayúsculas de manera dinámica, veamos un ejemplo usando una funciona para agilizar el proceso.

A) Primera forma: Usando JavaScript

Primero declaramos la siguiente función:

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

Descripción de la función. – Esta función PrimeraMayuscula(string), lo que hace es convertir el primer carácter de una cadena dada en letra mayúscula.

Ahora, suponiendo que la primera letra ya estuviera en mayúsculas, la función lo dejara tal como está, es decir en mayúsculas.

Recordemos que esta función no realiza cambios en el resto de la cadena, solo realiza el cambio en el primer carácter, veamos el siguiente código JavaScript:

CadenaTexto= 'mi primer articulo';
CadenaTexto = PrimeraMayuscula(CadenaTexto.toLowerCase()); 
// Imprimira lo siguiente
// Mi primer articulo

¿Que realiza este código JavaScript?

Lo primero que realiza es pasar toda la cadena a minúsculas usando la función nativa JavaScript llamada toLowerCase(), luego haciendo uso de la función PrimeraMayuscula(string), para convertir el primer carácter de la cadena en mayúsculas y lo demás de la cadena en minúsculas.

Código completo.

Les dejare tanto la función como la ejecución de la función en una cadena de texto.

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

CadenaTexto= 'mi primer articulo'; 
CadenaTexto = PrimeraMayuscula(CadenaTexto.toLowerCase()); 
 // Mi primer articulo
document.write(CadenaTexto);

B) Segunda forma: Función JavaScript

Este otro ejemplo es similar al anterior solo que trabaja con elementos de formulario HTML y consola. Además, se logrará la capitalización del primer carácter a mayúscula.

¿Cómo funciona este código?

Primero el usuario digitará un texto o una cadena de texto en un INPUT de un formulario HTML, luego al presionar el botón «Convertir Mayuscula» el resultado de la conversión lo devolverá en un DIV HTML para que podamos visualizar.

Este método usa dos funciones la principal llamada «mostrarMayuscula» y otra llamada «convertir». Ahora, la función principal mostrarMayuscula llamara a la función convertir para lograr el cambio que necesitamos «convertir(datos.toLowerCase()«.

Veamos el ejemplo completo.

function mostrarMayuscula() {
        var datos = document.getElementById('datos').value;
        datos = convertir(datos.toLowerCase());
console.log(datos);
document.getElementById('resultado').innerHTML = datos;
    }

function convertir(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    document.write("Nombre y apellidos:");
    document.write("<br>");

Código HTML usando las funciones JavaScript

<input type='text' id='datos'><br><br>
Resultado: <b><div id='resultado'></div></b><br>

<input type='button' value='Convertir Mayuscula' onclick='mostrarMayuscula()'>

c) Tercera forma: Convertir texto a Mayúsculas & Minúsculas

Si deseamos convertir toda la cadena en una(s) cadena(s) de texto en mayúsculas y minúsculas en el lenguaje JavaScript existe unas funciones muy interesantes llamadas toLowerCase() para convertir a «minúsculas», y toUpperCase() para convertir a «mayúsculas» de manera directa y precisa.

Veamos los ejemplos y su aplicación.

a) Convertir todo a minúsculas

var cadena = new String("Sin Batalla No Hay Victoria"); 
cadena = cadena.toLowerCase(); 
document.write(cadena);
// Imprime: "sin batalla no hay victoria"

b) Convertir todo a mayúscula

var cadena = new String("sin batalla No Hay Victoria"); 
cadena = cadena.toUpperCase(); 
document.write(cadena);
// Imprime: "SIN BATALLA NO HAY VICTORIA"

D) Cuarta Forma: Usando jQuery

Si queremos lograr el mismo objetivo usando jQuery podemos usar los siguientes códigos y si observamos es aún más sencillo de aplicar. Por lo tanto, si observamos el código mostrado solo tenemos que agregar la CLASE CSS, Elementos HTML o identificadores para que jQuery pueda convertirlo si ningún inconveniente.

Veamos un ejemplo aplicando la conversión en la etiqueta BODY del HTML.

// Convierte todos los textos del BODY  a "minúsculas"
$('body').toLowerCase();

// Convierte todos los textos del BODY  a "MAYUSCULAS"
$('body').toUpperCase();

CONCLUSIÓN DE CONVERTIR TEXTO A MAYUSCULAS

De una manera muy sencilla hemos aprendido a convertir textos o cadenas a mayúscula o minúsculas usando JavaScript o jQuery según su elección.

Cabe resaltar que esto puede ser muy útil a la hora de mostrar la información en el FRONT-END de nuestros proyectos web, en contenidos de foros y títulos, etc. Por lo tanto, muchas personas no respetan las primeras letras en mayúscula.

En otros articulos hemos visto Cómo redirigir con jQuery a otra pagina

Con este sencillo método podemos darles solución definitiva a estos inconvenientes y espero que esta breve explicación les ayude en sus proyectos que estén desarrollando.