HOWTO · jQuery
jQuery는 첫 글자를 대문자로
이 자습서는 jQuery를 사용하여 문자열의 첫 글자를 대문자로 표시하는 방법을 보여줍니다.
이 페이지의 내용
이 자습서는 jQuery를 사용하여 문자열의 첫 글자를 대문자로 표시하는 방법을 보여줍니다.
문자열을 끊거나 첫 글자를 바꾸는 데 도움이 되는 도우미 메서드와 함께 toUpperCase() 메서드를 사용하여 jQuery에서 문자열의 첫 글자를 대문자로 바꿀 수 있습니다. 이 자습서는 jQuery에서 문자열의 첫 글자를 대문자로 표시하는 다양한 방법을 보여줍니다.
toUpperCase()를 replace() 메서드와 함께 사용하여 jQuery에서 첫 글자를 대문자로
toUpperCase() 메서드는 모든 텍스트를 대문자로 표시할 수 있지만 문자열의 첫 글자를 대문자로 표시하려면 toUpperCase 메서드를 지원하는 다른 메서드가 필요합니다. 주어진 문자열의 첫 글자를 대문자로 바꾸는 데 도움이 되는 Javascript의 replace 메서드를 사용합니다. 이러한 메서드의 구문은 다음과 같습니다.
String.toUpperCase()- 주어진 전체 문자열을 대문자로 변환합니다.String.replace(/\b[a-z]/g, function(NewString){}- 이 메서드는 두 개의 매개변수를 사용합니다. 하나는 첫 번째 문자를 식별하는 패턴이고 두 번째는 문자열이 있는 메서드입니다. 교체할.
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>
위의 코드는 문자열에 있는 각 단어의 첫 글자를 대문자로 표시합니다. 출력을 참조하십시오.
