Kodeclik Blog
How to check if a letter is uppercase in Javascript
Given a string how can we check if a letter in the string is uppercase? To understand how to do this, we will write a Javascript program and embed it inside a HTML page like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How to check if a letter is uppercase in Javascript</title>
</head>
<body>
<script>
</script>
</body>
</html>
In the above HTML page you see the basic elements of the page like the head element containing the title (“How to check if a letter is uppercase in Javascript”) and a body with an empty script tag. Any HTML markup goes inside the body tags and any Javascript code goes inside the script tags.
Checking if a letter is uppercase
Let us write a simple program to inspect the first character of a string and determine if it is uppercase. To this end, we use the toUpperCase() method to convert the letter, and, if the letter stays the same it implies that it was uppercase in the first place.
<script>
const me = "Kodeclik Online Academy"
const first_char = me[0]
if (first_char === first_char.toUpperCase()) {
document.write(first_char + " is uppercase<BR>")
}
</script>
The output of this program is:
K is uppercase
Recall the difference between Javascript’s == and ===. The former does type casting before checking for equality whereas the latter is a strict check for equality without any conversion of typesLet us try updating the above code to inspect the second character:
<script>
const me = "Kodeclik Online Academy"
const second_char = me[1]
if (second_char === second_char.toUpperCase()) {
document.write(second_char + " is uppercase<BR>")
} else {
document.write(second_char + " is lowercase<BR>")
}
</script>
The output is:
o is lowercase
So far so good. Let us write a program to inspect every character in the string:
<script>
const me = "Kodeclik Online Academy"
for (let i of me) {
if (i === i.toUpperCase()) {
document.write(i + " is uppercase<BR>")
} else {
document.write(i + " is lowercase<BR>")
}
}
</script>
Here we use a for loop to iterate over all characters in the string. The output is:
K is uppercase
o is lowercase
d is lowercase
e is lowercase
c is lowercase
l is lowercase
i is lowercase
k is lowercase
is uppercase
O is uppercase
n is lowercase
l is lowercase
i is lowercase
n is lowercase
e is lowercase
is uppercase
A is uppercase
c is lowercase
a is lowercase
d is lowercase
e is lowercase
m is lowercase
y is lowercase
Most of the output above looks good save for these two lines:
is uppercase
is uppercase
Note that the test fails for non-alphabetical characters such as the space in the string. Similarly if you had digits or other punctuation characters, the test would fail. To account for situations like this, let us first check if the character is even a letter (which means that it should pass the toUpperCase method test and fail a toLowerCase method test, or vice versa). The below code accomplishes what we want:
<script>
const me = "Kodeclik Online Academy"
for (let i of me) {
if (i === i.toUpperCase() && i != i.toLowerCase()) {
document.write(i + " is uppercase<BR>")
} else if (i === i.toLowerCase() && i != i.toUpperCase()) {
document.write(i + " is lowercase<BR>")
} else {
document.write(i + " is something else<BR>")
}
}
</script>
The output is:
K is uppercase
o is lowercase
d is lowercase
e is lowercase
c is lowercase
l is lowercase
i is lowercase
k is lowercase
is something else
O is uppercase
n is lowercase
l is lowercase
i is lowercase
n is lowercase
e is lowercase
is something else
A is uppercase
c is lowercase
a is lowercase
d is lowercase
e is lowercase
m is lowercase
y is lowercase
As you can see the two space characters are now correctly determined to be “something else” while the other characters are correctly classified as either uppercase or lowercase.
If you liked this blogpost and analyzing strings, checkout our blogpost on four different methods to reverse a string in Javascript.
Interested in learning more Javascript? Learn how to loop through two Javascript arrays in coordination and how to make a Javascript function return multiple values!
Want to learn Javascript with us? Sign up for 1:1 or small group classes.