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, Jan 24 '12 at 01:03
no, thisID is always a different id, and actually, i meant to make it
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, Jan 24 '12 at 01:42

score 16 · Accepted Answer · edited Dec 03 '19 at 17:02

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 03 '19 at 17:02

adiga

34,372
9
61
83

answered Jan 24 '12 at 01:13

Moon

33,439
20
81
132

What makes you advise using regular expressions for this? – icktoofay Jan 24 '12 at 01:15
@icktoofay: Please refer to http://stackoverflow.com/questions/6243563/regex-vs-while-loops ... And, in this particular case, regex is not too complicated as well. – Moon Jan 24 '12 at 01:18
@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. – nnnnnn Jan 24 '12 at 01:37
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(). – jaredwilli Jan 24 '12 at 07:35

score 9 · Answer 2 · edited Dec 03 '19 at 17:03

9

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 03 '19 at 17:03

adiga

34,372
9
61
83

answered Jan 24 '12 at 01:04

icktoofay

126,289
21
250
231

Note that this requires [`Array.prototype.map`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map). Some older browsers do not support it. If this is a problem, you can [shim it](https://github.com/kriskowal/es5-shim) or use [jQuery](http://www.jquery.com/)'s [`$.map`](http://api.jquery.com/jQuery.map) or [underscore.js](http://documentcloud.github.com/underscore/)'s [`_.map`](http://documentcloud.github.com/underscore/#map) or some other library's equivalent function instead. – icktoofay Jan 24 '12 at 01:11
The MDN page you linked to has a stand-alone implementation of `.map()` if the OP doesn't want to include an entire library. – nnnnnn Jan 24 '12 at 01:21

score 4 · Answer 3 · edited Dec 03 '19 at 17:04

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.

score 3 · Answer 4 · edited Aug 02 '17 at 11:11

3

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

edited Aug 02 '17 at 11:11

Bugs

4,491
9
32
41

answered Aug 02 '17 at 10:50

Manindra Gautam

387
3
8

score 0 · Answer 5 · answered Mar 06 '22 at 20:53

0

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

answered Mar 06 '22 at 20:53

Michael

11
2

score 0 · Answer 6 · answered Jun 03 '22 at 22:42

0

Short and great way:

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

answered Jun 03 '22 at 22:42

Ramin eghbalian

2,348
1
16
36

score 0 · Answer 7 · answered Dec 26 '22 at 06:48

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

score 0 · Answer 8 · answered Jul 21 '23 at 22:36

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'

Convert slug variable to title text with javascript

8 Answers8

Much Simplified answer