JavaScript jQuery Web Development

The data you have on your storage server can be used in various places on your website. Let’s say, you want it all uppercase when it is used on one page, and on the other, you want it in the sentence case.

To do this, you are not going to have the same data in different cases on your server, rather, you should convert the text case in your webpage, without wanting to modify the data in the server itself.

In this article, you will see, how to convert text value of an element, referred to as “selector” here, to lowercase, uppercase, title case and pascal case using jquery.

Let us fetch the string to be converted and have it in a variable, so we reuse it for different cases.

str = $('selector').text(); // Let's assume str = 'mac-Book pRO'

1. To Lowercase

$('selector').text(str.toLowerCase()); // str = 'mac-book pro'

2. To Uppercase

$('selector').text(str.toUpperCase()); // str = 'MAC-BOOK PRO'

3. To Sentence case

For sentence case, the first letter of the first word is capitalized in the sentence or heading.

$('selector').text(str.charAt(0).toUpperCase() + str.substr(1).toLowerCase()) // str = 'Mac-book pro'

Here, str.charAt(0).toUpperCase() converts the first character of the string to uppercase.
str.substr(1) – fetches the substring from the string starting from index 1 till the end.
str.substr(1).toLowerCase() – converts the extracted sub-string to lowercase

4. To Title case

For title case, the first letter of each word is capitalized in the sentence or the heading.

new_str = str.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
    return txtVal.toUpperCase();
});
$('.list-title').text(new_str) // str = 'Mac-book Pro'

str is first converted entirely to lowercase. Then, the regex  /\b[a-z]/  determines the word break and converts the 1st letter of the word to uppercase.
The modified string is then returned.

5. To Pascal case

For PascalCase, the first letter of each concatenated word is capitalized. The spaces between the words are removed and no separators like a hyphen, dot etc is used.

new_str = str.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {
    return txtVal.toUpperCase();
});
$('.list-title').text(new_str) // str = 'Mac-book Pro'

It is same as title case. Just the spaces are removed and the string is obtained.

The other way around to achieve this is to assign the CSS property of text-transform

$('selector').css('text-transform', 'capitalize')

Changing text case made easy 😉


Team Smartherd has a decade of experience in online teaching. Our instructors are tech geeks and holds significant experience in their respective domains.