jQuery는 첫 글자를 대문자로
-
toUpperCase()를replace()메서드와 함께 사용하여 jQuery에서 첫 글자를 대문자로 -
toUpperCase()를substring()메서드와 함께 사용하여 jQuery에서 첫 글자를 대문자로 -
css()메서드를 사용하여 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>
위의 코드는 문자열에 있는 각 단어의 첫 글자를 대문자로 표시합니다. 출력을 참조하십시오.
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