Capitalize The First Letter of Each Sentence in JavaScript

It is annoying to read a paragraph where sentences don't start with capitalized letters. It can also make the text more difficult to read and understand.

Imagine you have hundreds of sentences that don't have uppercase letters at the beginning. Changing the first letter of each sentence manually will be pretty frustrating and time-consuming.

In this blog post, I will show 2 simple techniques that you can use to capitalize the first letter of each sentence programmatically using JavaScript. This will save you time and energy.

There are 2 ways to convert the first letter of each sentence to uppercase in JavaScript:

• Capitalize the first letter using built-in JavaScript methods.
• Capitalize the first letter using regular expressions (Regex).

I will discuss both of these techniques with examples. Let's get started.

Capitalize the First Letter of Each Sentence with JavaScript Methods

First, you will see how to use JavaScript built-in methods to capitalize the first letter of each sentence. You need to use 3 methods for this job. These are:

• charAt() – To extract the first letter from a sentence.
• toUpperCase() – To convert the first letter to uppercase.
• slice() – To get the remaining words from a sentence.

We also use these 3 methods to capitalize the first letter of any string. You can use the same process, in this case for a sentence.

          const paragraph = `javaScript is a powerful programming language used to create dynamic and interactive websites. did you know that it is also used for server-side programming? that's right, you can now use it for both client-side and server-side programming! it's a great time to learn this programming language.`

const sentences = paragraph.split(/(?<=[.!?])\s+/)

const capitalized = sentences.map((sentence) => {
    return sentence.charAt(0).toUpperCase() + sentence.slice(1)
}).join(' ')

console.log(capitalized)
// JavaScript is a powerful programming language used to create dynamic and interactive websites. Did you know that it is also used for server-side programming? That's right, you can now use it for both client-side and server-side programming! It's a great time to learn this programming language.
        

You need to split the paragraph into an array of individual sentences. Here I am using the split() method with a simple regular expression to split sentences ending with different punctuation marks like periods, question marks, and exclamation points.

Now use the map() method to iterate through each sentence in the array. Inside the callback function, you have access to each individual sentence.

You will call the charAt(0) and toUpperCase() methods to get the first character and capitalize it. The slice(1) method is getting the rest of the sentence other than the first character.

Finally, concatenate the capitalized first letter and the rest of the sentence using the + operator and return it from the callback function.

After capitalizing each sentence, you have to join the array of sentences back together into a single string using the join() method.

That's it, now you have your paragraph where every sentence contains an uppercase letter.

As you can see, I used a regular expression to split the paragraph into an array of sentences. But if you want to use only JavaScript methods without any regular expressions, use this.

          const paragraph = `javaScript is a powerful programming language used to create dynamic and interactive websites. did you know that it is also used for server-side programming? that's right, you can now use it for both client-side and server-side programming! it's a great time to learn this programming language.`

const sentences = []
let start = 0

for (let i = 0; i < paragraph.length; i++) {
    if (paragraph[i] === '.' || paragraph[i] === '?' || paragraph[i] === '!') {
        const sentence = paragraph.substring(start, i + 1).trim()

        const updated = sentence.charAt(0).toUpperCase() + sentence.slice(1)

        sentences.push(updated)

        start = i + 1
    }
}

const capitalized = sentences.join(' ')

console.log(capitalized)
// JavaScript is a powerful programming language used to create dynamic and interactive websites. Did you know that it is also used for server-side programming? That's right, you can now use it for both client-side and server-side programming! It's a great time to learn this programming language.

        

Here, you need to loop through each character and get the individual sentence of a paragraph based on different punctuation marks.

You can use the same 3 methods to capitalize the first letter of that sentence and push it to the sentences array. After each sentence has been capitalized, join the array with the join() method.

Also Read: How to Print a Webpage or Part of It in JavaScript Like a Pro

Use Regex to Convert the First Letter of Each Sentence to UpperCase

You can also use regular expressions to capitalize the first letter of each sentence in a paragraph if you prefer. For that, you can utilize the regular expression with the replace() method.

This method will find a match based on the "Regex" and replace it with anything you want. In this case, we will match the first letter and replace it with the uppercase version of that letter.

          const paragraph = `javaScript is a powerful programming language used to create dynamic and interactive websites. did you know that it is also used for server-side programming? that's right, you can now use it for both client-side and server-side programming! it's a great time to learn this programming language.`

const sentences = paragraph.split(/(?<=[.!?])\s+/)

const capitalized = sentences.map((sentence) => {
    return sentence.replace(/^\w{1}/, (letter) => {
        return letter.toUpperCase()
    })
}).join(' ')

console.log(capitalized)
// JavaScript is a powerful programming language used to create dynamic and interactive websites. Did you know that it is also used for server-side programming? That's right, you can now use it for both client-side and server-side programming! It's a great time to learn this programming language.

        

Here I am also splitting the paragraph into an array of sentences with the split() method and looping over this array using the map() method.

Now, call the replace() method on each sentence. This method takes two arguments: the first argument is the pattern to search for, and the second argument is the replacement value.

In this case, the pattern is /^\w{1}/, which is a RegEx pattern that matches the first-word character in the sentence.

I am passing a function as the replacement value that takes one argument (in this case, letter) and returns the capitalized version of that letter using the toUpperCase() method.

Once each sentence has been capitalized in this way, you can call the join() method to join all the sentences back together into a single string.

Also Read: How to Capitalize the First Letter of Each Word in JavaScript

Conclusion

Capitalizing the first letter of each sentence is important to make our text more visually appealing and clean. Therefore, it becomes easy to read and understand.

In JavaScript, there are several ways to achieve this. You can use built-in methods or a RegEx pattern. We discussed both techniques in this post.

Now, you can choose any of these techniques to convert the first letter of every sentence in a paragraph programmatically using JavaScript. It will be helpful particularly if you want to format many sentences very quickly.