This blog post will guide you through the process of converting string to title case using JavaScript. By following this guide, you'll gain knowledge and understanding of manipulating strings and working with functions and methods.
You’ll learn in this blog post:
- Convert text into title case on click.
Developing this title case conversion functionality will equip you with valuable knowledge and familiarity with a variety of JavaScript methods like:
- toLowerCase()
- toUpperCase()
- trim()
- Split()
- map()
- join()
- substring()
Convert Text To Title Case On Click Using Javascript.
Example 1:
Creating function to convert string to title case.
First, we convert all textarea values to lowercase and trim them from both sides. After trimming, we split the textarea values using the split function based on spaces between words, converting them into arrays.
Now, we have the arrays. We iterate through them using a loop and capitalise the first letter of each word (array element) separately. Then, we concatenate it with the remaining letters of the word (excluding the first letter, already capitalised), effectively converting the word to title case.
But still the words have no space between them so for that we also concatenate space after each word. This step ensures that all words in the final text are properly capitalised and readable for users.
The final step is to trim the final text or final senetence using the trim method. We add a space after each word, resulting in an extra space after the last word. The trim method removes this unwanted space. Finally we store the output in the textarea.
See the code for better understanding.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convert text to title case | maketechstuff.com</title>
</head>
<body>
<div class="box">
<textarea cols="30" rows="5" id="text"></textarea>
<br>
<button type="button" class="title_case_button">Title Case</button>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
button{
width: 100%;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
background-color: blue;
color: #fff;
padding: 5px;
cursor: pointer;
transition: 0.2s;
}
button:active{
transform: scale(0.95);
}
JavaScript
let text = document.getElementById("text");
let title_case_button = document.querySelector(".title_case_button");
title_case_button.addEventListener("click", change_to_uppercase);
function change_to_uppercase() {
let title_case_value = "";
let array = text.value.toLowerCase().trim().split(" ");
for (let i = 0; i < array.length; i++) {
const element = array[i];
if(element != ""){
title_case_value += element.charAt(0).toUpperCase() + element.substring(1) + " ";
}
}
text.value = title_case_value.trim();
}
Output:
This method replace all space between words by single space. Means if user added string ("good morning") then after title case it will give output of ("Good Morning").
To let spaces remain between the words. Just remove the if condition from for loop. See below code.
JavaScript
let text = document.getElementById("text");
let title_case_button = document.querySelector(".title_case_button");
title_case_button.addEventListener("click", change_to_uppercase);
function change_to_uppercase() {
let title_case_value = "";
let array = text.value.toLowerCase().trim().split(" ");
for (let i = 0; i < array.length; i++) {
const element = array[i];
title_case_value += element.charAt(0).toUpperCase() + element.substring(1) + " ";
}
text.value = title_case_value.trim();
}
Example 2:
Firstly, we convert all textarea values to lowercase and trim them from both sides. Following trimming, we utilise the split function to separate the textarea values based on spaces between words, generating an array of individual words.
Now, we work with each word within the array. We employ the map function to iterate through each element and extract its first letter. This first letter is then capitalised using the toUpperCase method. Finally, we concatenate the capitalised first letter with the remaining letters of the word , excluding the already capitalised first letter (achieved through subtracting the first letter using the substring method as we have already capitalised it).
Although the title case is formed, the resulting values are still stored in array format. We use the join method to show it as a single string, creating the final title-case format.
Finally we store the above output in the textarea.
See below code for better understanding.
JavaScript
let text = document.getElementById("text");
let title_case_button = document.querySelector(".title_case_button");
title_case_button.addEventListener("click", change_to_uppercase);
function change_to_uppercase() {
let array = text.value.toLowerCase().trim().split(" ").map((letter,index)=> letter.charAt(0).toUpperCase() + letter.substring(1)).join(" ");
text.value = array;
}
Output:
This guide demonstrates how to create title case conversion functionality using HTML, CSS, and JavaScript, allowing users to easily capitalise the first letter of each word with a single click. Feel free to leave your thoughts, questions, or suggestions in the comments below!
You may like:
- How to convert the the input field value to uppercase and lowercase on click using JavaScript.
- How to convert text case to uppercase or lowercase instantly on input using JavaScript.
Share your thoughts.