Convert slug variable to title text with javascript

Question

I'm trying to do something that would be similar to turning a url slug-like variable into text that could be used for a title.

So, I have a variable for example that is like this:

var thisID = 'athlete-profile'; function myFunc(thisID) { // i need to use thisID as the id and href in a loop that generates a string of <li><a>'s\ function makeTitle(thisID) { // convert thisID to text so for this example it would return 'Athlete Profile' return 'Athlete Profile'; } for () { var str = '<li id="'+thisID+'"><a href="#'+thisId+'">'+makeTitle(thisID)+'</a>'; } // make sense? }

I'd like to not use a regex to do this if possible somehow, but I don't think there's a way to do it without one. So any one who knows how to do this type of thing let me know, it would be a great help.

Thanks

What is that for loop doing? Element ids need to be unique, so you shouldn't be creating elements in a loop and giving them all the same id. — nnnnnn
– nnnnnn, Commented Jan 24, 2012 at 1:03
no, thisID is always a different id, and actually, i meant to make it <li class="'thisID" the for loop is negligible. I really am just worried about the makeTitle() function and returning the var but without hyphens. I can use CSS to capitalize the text then. — jaredwilli
– jaredwilli, Commented Jan 24, 2012 at 1:06
If you just want to change hyphens to spaces it is super simple: thisID.replace(/-/g, " ") (as shown in the first part of my answer). But doing the capitalisation is also easy as shown in any of the answers below. — nnnnnn
– nnnnnn, Commented Jan 24, 2012 at 1:42

adiga · Accepted Answer · 2019-12-03 17:02:54Z

16

I would advise you to use regular expression. But if you really don't want to use regular expressions, the solution below would work for simple cases. Feel free to modify it as you like it.

function makeTitle(slug) { var words = slug.split('-'); for (var i = 0; i < words.length; i++) { var word = words[i]; words[i] = word.charAt(0).toUpperCase() + word.slice(1); } return words.join(' '); } console.log( makeTitle("athlete-profile") )

edited Dec 3, 2019 at 17:02

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jan 24, 2012 at 1:13

Moon

35.6k20 gold badges85 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

icktoofay Over a year ago

What makes you advise using regular expressions for this?

Moon Over a year ago

@icktoofay: Please refer to stackoverflow.com/questions/6243563/regex-vs-while-loops ... And, in this particular case, regex is not too complicated as well.

nnnnnn Over a year ago

@icktoofay - I'd advise regular expressions for this for two reasons. Firstly it's a really easy solution. Secondly, one way to express the requirement in plain English is that the OP wants to replace hyphens with spaces, and replace first letter lowercase with uppercase, so to me it seems only logical to go ahead and use the .replace() method to achieve that. Obviously there are other ways to do it, and the .split() and .join() method from your answer (or this one) is quite neat too.

jaredwilli Over a year ago

I meant to get back to you on this a while ago, i realized that i could just use the split() method to split it at the - and then concat the 2 array keys back together. I didn't use this exact answer, since CSS can do the capitalizing stuff, but the general idea was right, had i seen it first before remembering it was doable with split().

adiga · Accepted Answer · 2019-12-03 17:03:42Z

10

function titleize(slug) { var words = slug.split("-"); return words.map(function(word) { return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase(); }).join(' '); } console.log(titleize("athlete-profile"))

It works pretty simply:

It splits the string by - into words.
It maps each word into title case.
It joins the resulting words with spaces.

edited Dec 3, 2019 at 17:03

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jan 24, 2012 at 1:04

icktoofay

130k23 gold badges261 silver badges239 bronze badges

2 Comments

icktoofay Over a year ago

Note that this requires Array.prototype.map. Some older browsers do not support it. If this is a problem, you can shim it or use jQuery's $.map or underscore.js's _.map or some other library's equivalent function instead.

nnnnnn Over a year ago

The MDN page you linked to has a stand-alone implementation of .map() if the OP doesn't want to include an entire library.

adiga · Accepted Answer · 2019-12-03 17:04:24Z

The makeTitle() part of your question can be implemented something like this:

function makeTitle(thisID) { return thisID.replace(/-/g, " ").replace(/\b[a-z]/g, function() { return arguments[0].toUpperCase(); }); } console.log(makeTitle("athlete-profile"))

The first .replace() changes all hyphens to spaces, and then the second .replace() takes any lower-case letter that follows a word boundary and makes it upper-case.

(For more information see the MDN doco for .replace().)

As far as doing it without using regular expressions, I'm not sure why you'd specifically want to avoid them, especially when the required expressions are pretty simple in this case (especially if you do the hyphen to space and first letter capitalisation in two steps as shown above). But there are endless ways to do this without regex using various combinations of JavaScript's string manipulation methods.

Bugs · Accepted Answer · 2017-08-02 11:11:25Z

Do it in one line:

'athlete-profile'.split("-").join(" ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()})

Output: Athlete Profile

Michael · Accepted Answer · 2022-03-06 20:53:15Z

Do it like this

 let someString = 'im a string'; console.log(someString.replace(/-/g, ' ') .replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) )

Output: Im A String

Ramin eghbalian · Accepted Answer · 2022-06-03 22:42:37Z

Short and great way:

const slugToText = (slug) => { return slug.toLowerCase().replace(/-/g,' ') }

Nivethan · Accepted Answer · 2022-12-26 06:48:49Z

Much Simplified answer

we can use String.prototype.replaceAll method to easily achieve this

function convertSlugToString(slug) { return slug.replaceAll("-", " "); }

incase you want to make sure the output is all lowercase then you can do the following

function convertSlugToString(slug) { return slug.toLowerCase().replaceAll("-", " "); }

Additional info:

String.prototype.replaceAll() is a ES2021 feature and it also has a great browser support with 93.64% global coverage, click here for more info

if you want to support IE then refer to the other answers

SimoAmi · Accepted Answer · 2023-07-21 22:36:45Z

Here's a one liner ready to add to your app helpers:

/** * Converts slug to title * * @example * toTitle('slug-word') */ const toTitle = (slug) => slug.toLowerCase().split(/[-_.\s]/).map((w) => `${w.charAt(0).toUpperCase()}${w.substr(1)}`).join(' ');

Example:

toTitle('one-two_three.four Five') >> 'One Two Three Four Five'

Nice, but sadly lowercases all acronyms such as BBC to Bbc :(
You can omit the .toLowerCase() call to maintain uppercasing.

ulises · Accepted Answer · 2023-12-29 19:14:08Z

//this is wrong : function convertSlugToString(slug) { return slug.toLowerCase().replaceAll("-", " "); } //is the reverse form for work well: function convertSlugToString(slug) { return slug.toLowerCase().replaceAll(" ", "-"); }

The poster wanted to convert the dashes to spaces, not the spaces to dashes.

Collectives™ on Stack Overflow

Convert slug variable to title text with javascript

9 Answers 9

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Much Simplified answer

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Much Simplified answer

Comments

2 Comments

1 Comment

Linked

Related