DEV Community

Ian
Ian

Posted on

Capitalizing Words in Javascript

#javascript #vue

I was looking for a solution on capitalizing all words in a string in Javascript this morning to use as the title of a page, I found a bunch of solutions, some included regex, some included looping through every character, some required a whole function.

I wanted something much cleaner and thought I'd share with everyone my solution

For this example I will be using the string "my awesome title"

"my awesome title".split(' ').map(i => {
    return i[0].toUpperCase() + i.substr(1);
}).join(' ');
Enter fullscreen mode Exit fullscreen mode

So what is happening? First we split the string into an array by a space, we then iterate over it returning the first character of the string as uppercase, and the rest of the string starting at position 1. We then join it all back together with a space.

You can easily turn this into a function

capitalizeWords(words) {
    return words.split(' ').map(i => {
        return i[0].toUpperCase() + i.substr(1);
    }).join(' ');
}
Enter fullscreen mode Exit fullscreen mode

Or if you are writing in VueJS like I needed to you can created a computed property, you will need to change the this.$route.params.category to what you want and split it by the appropriate character, for my requirement it was split by a dash

computed: {
    title: () => {
        this.$route.params.category.split('-').map((i) => {
            return i[0].toUpperCase() + i.substr(1)
        }).join(' ')
    }
}
Enter fullscreen mode Exit fullscreen mode

There seems to be quite a few ways to do this, but I found this way to be cleaner than requiring regex, if you want to do it with regex, I found this blog had an example

Top comments (4)

Collapse
 
therealokoro profile image
Okoro Redemption • • Edited

Nice one @ian .

I created a JavaScript Utility Library that comes with so many useful functions and method all categorized into modules. One of this modules is the "Str", which contains methods that manipulates a string. And amongst close to 40 methods, capitalizing a string is one of them.

You can check it out on Github

To achieve this using the library, after installation(obviously)

// export the "Str" module's functions to a variable
var Str = ToolJS.export("Str");

// you could also just import the Str module from the libraries ESM version
// import { Str } from "https://unpkg.com/@redeakaa/tooljs@1.0.1/dist/esm/tooljs.esm.js";

// call the "capitalize" method on the string....
var capitalized = $.capitalize("hello everyone, give toolJS a try");
console.log(capitalized);
// => "Hello Everyone, Give ToolJS A Try"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
leobm profile image
Felix Wittmann • • Edited 
"my awesome title".replace(/(\b[a-z](?!\s))/g, s => s.toUpperCase());
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kievandres profile image
Kiev Andres •

Great!

Collapse
 
1e4_ profile image
Ian • • Edited

I've never found regex easy to understand especially at a glance

Read next

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -

robertobutti profile image

Build a static website with Markdown content, using Nuxt and Fusionable (server API approach)

Roberto B. -

philip_zhang_854092d88473 profile image

Mastering Server-Sent Events (SSE) with Python and Go for Real-Time Data Streaming 🚀

Philip -

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -