HOWTO · jQuery
jQuery の最初の文字を大文字にする
このチュートリアルでは、jQuery を使用して文字列の最初の文字を大文字にする方法を示します。
このページの内容
このチュートリアルでは、jQuery を使用して文字列の最初の文字を大文字にする方法を示します。
文字列を分割したり、最初の文字を置き換えたりするのに役立つヘルパー メソッドで toUpperCase() メソッドを使用することにより、jQuery で文字列の最初の文字を大文字にすることができます。 このチュートリアルでは、jQuery で文字列の最初の文字を大文字にするさまざまな方法を示します。
replace() メソッドで toUpperCase() を使用して、jQuery で最初の文字を大文字にする
toUpperCase() メソッドは任意のテキストを大文字にできますが、文字列の最初の文字を大文字にするには、toUpperCase メソッドを支援する別のメソッドが必要です。 Javascript の replace メソッドを使用します。これは、指定された文字列の最初の文字を大文字にするのに役立ちます。 これらのメソッドの構文は次のとおりです。
String.toUpperCase()- 指定された文字列全体を大文字に変換します。String.replace(/\b[a-z]/g, function(NewString){}- このメソッドは 2つのパラメーターを受け取ります。1つは最初の文字を識別するパターンで、2 番目は文字列を使用するメソッドです。 交換する。
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>
上記のコードは、文字列内の各単語の最初の文字を大文字にします。 出力を参照してください。
toUpperCase() を substring() メソッドで使用して、jQuery で最初の文字を大文字にする
ご覧のとおり、replace() メソッドを使用した toUpperCase() メソッドは、文字列の各単語を大文字にしますが、最初の単語の最初の文字のみを大文字にするには、substring() メソッドを使用できます。 replace() メソッドの代わりに。 substring() を使用した構文は次のとおりです。
OriginalString.substring(0, 1).toUpperCase() + OriginalString.substring(1);
substring(0,1) は文字列を分割し、substring(1) は文字列の最初の文字を大文字にした後に文字列を再結合します。 例を試してみましょう：
<!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>
上記のコードは、指定された文字列の最初の単語の最初の文字のみを大文字にします。 出力を参照してください。
css() メソッドを使用して、jQuery で最初の文字を大文字にする
jQuery 組み込みメソッド css() を使用して、単語の最初の文字を大文字にすることもできます。 CSS プロパティ text-transform: capitalize; を使用できます。 特定の要素を最初の文字の大文字スタイルに保つ。
<!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>
上記のコードは、文字列内の各単語の最初の文字を大文字にします。 出力を参照してください。
