jQuery Poner en mayúscula la primera letra
-
Use
toUpperCase()con el métodoreplace()para poner en mayúscula la primera letra en jQuery -
Use
toUpperCase()con el métodosubstring()para poner en mayúscula la primera letra en jQuery -
Use el método
css()para poner en mayúscula la primera letra en jQuery
Este tutorial demuestra cómo poner en mayúscula la primera letra de una cadena usando jQuery.
Podemos poner en mayúscula la primera letra de una cadena en jQuery usando el método toUpperCase() con métodos auxiliares que ayudan a romper la cadena o reemplazar la primera letra. Este tutorial demuestra diferentes métodos para poner en mayúscula la primera letra de una cadena en jQuery.
Use toUpperCase() con el método replace() para poner en mayúscula la primera letra en jQuery
El método toUpperCase() puede poner en mayúscula cualquier texto, pero para poner en mayúscula la primera letra de una cadena, necesitamos otro método para ayudar al método toUpperCase. Usamos el método replace de Javascript, que nos ayudará a poner en mayúscula la primera letra de la cadena dada; la sintaxis para estos métodos es:
String.toUpperCase(): convertirá la cadena completa dada a mayúsculas.String.replace(/\b[a-z]/g, function(NewString){}- Este método tomará dos parámetros, uno es el patrón para identificar la primera letra y el segundo es un método con la cadena ser remplazado.
Probemos un ejemplo para poner en mayúscula la primera letra de una cadena dada usando jQuery:
<!doctype html>
<html lang="en">
<head>
<title>jQuery Capitalize First Letter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#DemoButton').click(function(){
var OriginalString = $('#DemoString').text();
CapitalizedString = OriginalString.replace(/\b[a-z]/g, function(DemoStr) {
return DemoStr.toUpperCase();
});
$("#output").text(CapitalizedString);
});
});
</script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h2>jQuery Uppercase First Letter of Text</h2>
<p id="DemoString">hello! this is delftstack.com</p>
<h3 id= "output"></h3>
<button type="button" id="DemoButton">Click to Uppercase the First Letter</button>
<div>
</body>
</html>
El código anterior escribirá en mayúscula la primera letra de cada palabra en la cadena. Ver la salida:
Use toUpperCase() con el método substring() para poner en mayúscula la primera letra en jQuery
Como podemos ver, el método toUpperCase() con el método replace() pondrá en mayúscula cada palabra de la cadena, pero para poner en mayúscula solo la primera letra de la primera palabra, podemos usar el método substring() en lugar del método replace(). La sintaxis que utiliza la subcadena() es:
OriginalString.substring(0, 1).toUpperCase() + OriginalString.substring(1);
Donde la subcadena (0,1) romperá la cadena y la subcadena (1) volverá a unirse a la cadena después de la mayúscula de la primera letra de la cadena. Probemos un ejemplo:
<!doctype html>
<html lang="en">
<head>
<title>jQuery Capitalize First Letter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#DemoButton').click(function(){
var OriginalString = $('#DemoString').text();
var CapitalizedString = OriginalString.substring(0, 1).toUpperCase() + OriginalString.substring(1);
$('#output').text(CapitalizedString);
});
});
</script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h2>Uppercase First Letter</h2>
<p id="DemoString">hello! this is delftstack.com</p>
<h3 id= "output"></h3>
<button type="button" id="DemoButton">Click to Uppercase the First Letter</button>
<div>
</body>
</html>
El código anterior pondrá en mayúscula solo la primera letra de la primera palabra de una cadena dada. Ver la salida:
Use el método css() para poner en mayúscula la primera letra en jQuery
También podemos usar el método integrado de jQuery css() para poner en mayúscula la primera letra de la palabra. Podemos usar la propiedad CSS text-transform: capitalize; para mantener un elemento particular en el estilo de mayúscula de la primera letra.
<!doctype html>
<html lang="en">
<head>
<title>jQuery Capitalize First Letter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#DemoButton').click(function(){
$('#DemoString').css("text-transform", "capitalize");
});
});
</script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h2>Uppercase First Letter</h2>
<p id="DemoString">hello! this is delftstack.com</p>
<button type="button" id="DemoButton">Click to Uppercase the First Letter</button>
<div>
</body>
</html>
El código anterior escribe en mayúscula la primera letra de cada palabra en la cadena. Ver la salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook