CODEWITHSUNDEEP
javascriptregex
Lee Loftiss
Lee Loftiss

Reputation: 3195

Replace underscores with spaces and capitalize words

I am attempting to create a way to convert text with lowercase letters and underscores into text without underscores and the first letter of each word is capitalized.

ex;

options_page = Options Page

At this page: How to make first character uppercase of all words in JavaScript?

I found this regex: 

key = key.replace(/(?:_| |\b)(\w)/g, function(key, p1) { return p1.toUpperCase()});

This does everything except replace the underscores with spaces. I have not really tried anything because I am not that familiar with regexpressions.

How can I adjust this regex so it replaces underscores with spaces?

Upvotes: 34

Views: 52502

Answers (6)

marionebl
marionebl

Reputation: 3382

This should do the trick:

function humanize(str) {
  var i, frags = str.split('_');
  for (i=0; i<frags.length; i++) {
    frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
  }
  return frags.join(' ');
}


console.log(humanize('humpdey_dumpdey'));
// > Humpdey Dumpdey

repl

http://repl.it/OnE

Fiddle:

http://jsfiddle.net/marionebl/nf4NG/

jsPerf:

Most test data: http://jsperf.com/string-transformations

All versions plus _.str: http://jsperf.com/string-transformations/3

Upvotes: 52

user1636522
user1636522

Reputation:

Another alternative:

camel = "options_page".replace(/(^|_)(\w)/g, function ($0, $1, $2) {
  return ($1 && ' ') + $2.toUpperCase();
});
console.log(camel);

The regular expression:

(^|_)   beginning of the input OR "_" ($1)
(\w)    a word character (short for [a-zA-Z0-9_]) ($2)
g       all occurrences (global)

More about regular expressions : http://www.javascriptkit.com/javatutors/redev.shtml.

Upvotes: 4

Hubert OG
Hubert OG

Reputation: 19544

These are two different tasks, so two different regexes is the best solution:

key = key.replace(/_/g, ' ').replace(/(?: |\b)(\w)/g, function(key) { return key.toUpperCase()});

To ensure even all capital words is processed. You can add .toLowerCase() before the very first .replace:

console.log('TESTING_WORD'.toLowerCase().replace(/_/g, ' ')
.replace(/(?: |\b)(\w)/g, function(key, p1) {
    return key.toUpperCase();    
}));

Upvotes: 8

Arian Acosta
Arian Acosta

Reputation: 6817

Since Lodash 3.1.0, there's a _.startCase([string='']) method that transforms any case into capitalized words (start case):

_.startCase('hello_world'); // returns 'Hello World'
_.startCase('hello-world'); // returns 'Hello World'
_.startCase('hello world'); // returns 'Hello World'

There are other useful methods in the String section of Lodash. Read the documentation here.

Upvotes: 17

Sagar Kamble
Sagar Kamble

Reputation: 590

Simply add .replace('_',' ')

Like this

function toCamel(string){
  return string.replace(/(?:_| |\b)(\w)/g, function($1){return $1.toUpperCase().replace('_',' ');});
}

Upvotes: 4

Alexandre Perez
Alexandre Perez

Reputation: 3495

Here:

var str = 'Lorem_ipsum_dolor_sit_amet,_consectetur____adipiscing_elit.'
str = str.replace(/_{1,}/g,' ').replace(/(\s{1,}|\b)(\w)/g, function(m, space, letter)
{
  return space + letter.toUpperCase();
})

console.log(str);

Upvotes: 2

Related Questions