jQuery Anfangsbuchstaben groß schreiben

Sheeraz Gul 15 Februar 2024
  1. Verwenden Sie toUpperCase() mit der replace()-Methode, um den ersten Buchstaben in jQuery groß zu schreiben
  2. Verwenden Sie toUpperCase() mit der substring()-Methode, um den ersten Buchstaben in jQuery groß zu schreiben
  3. Verwenden Sie die css()-Methode, um den ersten Buchstaben in jQuery groß zu schreiben
jQuery Anfangsbuchstaben groß schreiben

Dieses Tutorial zeigt, wie Sie den ersten Buchstaben einer Zeichenfolge mit jQuery groß schreiben.

Wir können den ersten Buchstaben eines Strings in jQuery groß schreiben, indem wir die Methode toUpperCase() mit Hilfsmethoden verwenden, die helfen, den String zu brechen oder den ersten Buchstaben zu ersetzen. Dieses Tutorial zeigt verschiedene Methoden zum Großschreiben des ersten Buchstabens einer Zeichenfolge in jQuery.

Verwenden Sie toUpperCase() mit der replace()-Methode, um den ersten Buchstaben in jQuery groß zu schreiben

Die toUpperCase()-Methode kann jeden Text gross schreiben, aber um den ersten Buchstaben einer Zeichenkette gross zu schreiben, brauchen wir eine andere Methode, die der toUpperCase-Methode hilft. Wir verwenden die Ersetzungsmethode von Javascript, die uns hilft, den ersten Buchstaben der angegebenen Zeichenfolge groß zu schreiben; Die Syntax für diese Methoden lautet:

  1. String.toUpperCase() - Konvertiert die angegebene ganze Zeichenfolge in Großbuchstaben.
  2. String.replace(/\b[a-z]/g, function(NewString){} – Diese Methode benötigt zwei Parameter, einer ist das Muster zur Identifizierung des ersten Buchstabens und der zweite ist eine Methode mit der Zeichenfolge ersetzt werden.

Versuchen wir ein Beispiel, um den ersten Buchstaben einer bestimmten Zeichenfolge mit jQuery groß zu schreiben:

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

Der obige Code schreibt den ersten Buchstaben jedes Wortes in der Zeichenfolge groß. Siehe die Ausgabe:

jQuery-String in Großbuchstaben

Verwenden Sie toUpperCase() mit der substring()-Methode, um den ersten Buchstaben in jQuery groß zu schreiben

Wie wir sehen können, schreibt die toUpperCase()-Methode zusammen mit der replace()-Methode jedes Wort des Strings gross, aber um nur den ersten Buchstaben des ersten Wortes gross zu schreiben, können wir die substring()-Methode verwenden statt der Methode replace(). Die Syntax mit dem substring() ist:

OriginalString.substring(0, 1).toUpperCase() + OriginalString.substring(1);

Wobei der substring(0,1) den String bricht und der substring(1) den String nach der Großschreibung des ersten Buchstabens des Strings wieder zusammenfügt. Versuchen wir es an einem Beispiel:

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

Der obige Code schreibt nur den ersten Buchstaben für das erste Wort einer bestimmten Zeichenfolge groß. Siehe die Ausgabe:

jQuery Großbuchstaben String Anfangsbuchstabe

Verwenden Sie die css()-Methode, um den ersten Buchstaben in jQuery groß zu schreiben

Wir können auch die in jQuery integrierte Methode css() verwenden, um den ersten Buchstaben des Wortes groß zu schreiben. Wir können die CSS-Eigenschaft text-transform: capitalize; um ein bestimmtes Element im Stil des Anfangsbuchstabens beizubehalten.

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

Der obige Code schreibt den ersten Buchstaben jedes Wortes in der Zeichenfolge groß. Siehe die Ausgabe:

jQuery-Zeichenfolge mit CSS groß schreiben

Sheeraz Gul avatar Sheeraz Gul avatar

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