How to capitalize first letter of each word in a string and change all spaces to underscores in JavaScript

Question

I am trying to implement a function in JavaScript that gives me an output like this for a given input value

Input: stack overflow

Output: Stack_Overflow

Input: the big bang theory

Output: The_Big_Bang_Theory

I have written the code to capitalize the letters but cannot seem to figure how to call both the functions on the same input at the same time. I am relatively new to Javascript and any help would be greatly appreciated. I will share my code here for further clarity

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<body>
<input id="myInput" type="text" value="" size="50" />

<pre id="myOutput" type="myInput">type something in the box above</pre>

<script>

String.prototype.capitalize = function(){
return this.toLowerCase().replace( /\b\w/g, function (m) {

return m.toUpperCase();

});
};

String.prototype.replaceAll = function(){
if(!search || !replace){return this;}
return this.replace(/ /g,"_"), function (n){
return n;
});
};

var myInput = document.getElementById('myInput');

var myOutput = document.getElementById('myOutput')

myInput.addEventListener('input', function(e) {
myOutput.innerHTML = this.value.capitalize();


});

myInput.addEventListener('input', function(f)) {
myOutput.innerHTML = this.value.replaceAll();
});

</script>

</body>
</html>

for capitalize, check this [post](http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript). For space to underscore, try `value = element.value.replace(/\s+/, '_')` — Rajesh, Dec 17 '15 at 11:02

score 1 · Answer 1 · answered Dec 17 '15 at 11:18

You're not actually passing in any arguments to the capitalize function. I've edited your code slightly to accommodate this.

// first check to see if `capitalize` doesn't
// already exist on the prototype - don't go overwriting
// native methods :)
if (!('capitalize' in String.prototype)) {
  String.prototype.capitalize = function() {
    return this.toLowerCase().replace(/\b\w/g, function(m) {
      return m.toUpperCase();
    });
  };
}

if (!('replaceAll' in String.prototype)) {

  // pass in search and replace as arguments
  String.prototype.replaceAll = function(search, replace) {
    if (!search || !replace) return this;

    // then just do a replace using the arguments
    return this.replace(search, replace, 'g');
  };
}

var str = 'the big bang theory';
str.capitalize().replaceAll(' ', '_'); // The_Big_Bang_Theory

DEMO

score 0 · Answer 2 · answered Dec 17 '15 at 11:13

0

Try This one

var str = 'stack overflow';
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
str= str.replace(' ','_');
alert(str);

https://jsfiddle.net/n6nqpwe6/

answered Dec 17 '15 at 11:13

Dhara

1,431
4
29
47

Giuseppe Ricupero · Answer 3 · 2015-12-17T11:58:12.653

UPDATE

I've embedded the method (called capitalize as you do) in the String class and placed the code in a running demo:

String.prototype.capitalize = function() {
  return this.toLowerCase().replace(
     /\b(\w)(\w*)( *)/g, 
     function(all, f, r, s) { return f.toUpperCase() + (r?r:'') + (s?'_':''); }
  );
};
 
var tests = ['stAck oVerFlow','the bIg bANg theory'];

while(t = tests.pop()){ 
    console.log(t, ' -> ', t.capitalize());
}

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

Legenda

The regex uses the capturing groups to match:

\b(\w): the first char of a regex word (equivalent to [a-zA-Z0-9_]). I does not use [a-z] to matches also the spaces after words already starts with a capital letter or numbers (or underscore, do you want to avoid this?).
(\w*): the rest of the regex word
( *): one or more spaces

Then in the closure it capitalize the first letter, append the rest of the word (if present) and append an underscore '_' if there are actually one or more spaces after the word.

How to capitalize first letter of each word in a string and change all spaces to underscores in JavaScript

3 Answers3