JS convertir una cadena de texto en mayúsculas, minúsculas o solo la primer letra de cada texto

JS convertir una cadena de texto en mayúsculas, minúsculas o solo la primer letra de cada texto

febrero 16, 2017

Ejemplo en JS con Jquery de como podemos transformar las letras de un texto ingresado en un texto capitalizado en cada una de sus palabras o solo la primer letra de todo el texto, convertir en mayúsculas todo el texto o todo en minúsculas.

<html>

<head></head>

<body>

<input type="text" class="capitalizeText" placeholder="Texto Capitalizado"/><br><br>

<input type="text" class="firstLetterText" placeholder="Primer letra mayúsculas"/><br><br>

<input type="text" class="toUpperText" placeholder="TODO MAYÚSCULAS"/><br><br>

<input type="text" class="toLowerText" placeholder="todo minúsculas"/><br><br>

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

<script>

$(document).ready(function() {

//La expresión regular encuentra la primer letra de cada palabra dentro de la oracíon ingresada y la transforma en mayúsculas.

String.prototype.capitalize = function(){

// \b encuentra los limites de una palabra

// \w solo los meta-carácter [a-zA-Z0-9].

return this.toLowerCase().replace( /\b\w/g, function (m) {

return m.toUpperCase();

});

};

// Toma la primer letra de todo el texto ingresado y la cambia a mayúsculas y el resto lo pone en minúsculas

String.prototype.firstLetterUpper = function(){

return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();

};

var myCapitalizeText = $('.capitalizeText');

var myFirstLetterText = $('.firstLetterText');

var myToUpperText = $('.toUpperText');

var myToLowerText = $('.toLowerText');

myCapitalizeText.focusout(function(){

$(this).val($(this).val().capitalize());

});

myFirstLetterText.focusout(function(){

$(this).val($(this).val().firstLetterUpper());

});

myToUpperText.focusout(function(){

$(this).val($(this).val().toUpperCase());

});

myToLowerText.focusout(function(){

$(this).val($(this).val().toLowerCase());

});

});

</script>

</body>

</html>

Ejemplo

Comentarios