Uppercase first letter of variable

Question

I have searched over the web can can't find anything to help me. I want to make the first letter of each word upper case within a variable.

So far i have tried:

toUpperCase();

And had no luck, as it uppercases all letters.

Answer 1

Use the .replace^[MDN] function to replace the lowercase letters that begin a word with the capital letter.

var str = "hello world";
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
alert(str); //Displays "Hello World"

---

Edit: If you are dealing with word characters other than just a-z, then the following (more complicated) regular expression might better suit your purposes.

var str = "петр данилович björn über ñaque αλφα";
str = str.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) {
    return letter.toUpperCase();
});
alert(str); //Displays "Петр Данилович Björn Über Ñaque Αλφα"

Answer 2

Much easier way:

$('#test').css('textTransform', 'capitalize');

I have to give @Dementic some credit for leading me down the right path. Far simpler than whatever you guys are proposing.

Answer 3

http://phpjs.org/functions/ucwords:569 has a good example

function ucwords (str) {
    return (str + '').replace(/^([a-z])|\s+([a-z])/g, function ($1) {
        return $1.toUpperCase();
    });
}

(omitted function comment from source for brevity. please see linked source for details)

EDIT: Please note that this function uppercases the first letter of each word (as your question asks) and not just the first letter of a string (as your question title asks)

Answer 4

just wanted to add a pure javascript solution ( no JQuery )

function capitalize(str) {
  strVal = '';
  str = str.split(' ');
  for (var chr = 0; chr < str.length; chr++) {
    strVal += str[chr].substring(0, 1).toUpperCase() + str[chr].substring(1, str[chr].length) + ' '
  }
  return strVal
}

console.log(capitalize('hello world'));

Answer 5

I imagine you could use substring() and toUpperCase() to pull out the first character, uppercase it, and then replace the first character of your string with the result.

myString = "cheeseburger";
firstChar = myString.substring( 0, 1 ); // == "c"
firstChar.toUpperCase();
tail = myString.substring( 1 ); // == "heeseburger"
myString = firstChar + tail; // myString == "Cheeseburger"

I think that should work for you. Another thing to consider is that if this data is being displayed, you can add a class to its container that has the CSS property "text-transform: capitalize".

Answer 6

To do this, you don't really even need Javascript if you're going to use

$('#test').css('text-transform', 'capitalize');

Why not do this as CSS like

#test,h1,h2,h3 { text-transform: capitalize; }

or do it as a class and apply that class to wherever you need it

.ucwords { text-transform: capitalize; }

Answer 7

Ever heard of substr() ?

For a starter :

$("#test").text($("#test").text().substr(0,1).toUpperCase()+$("#test").text().substr(1,$("#test").text().length));

[Update:]

Thanks to @FelixKling for the tip:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});

Answer 8

Building on @peter-olson's answer, I took a more object oriented approach without jQuery:

String.prototype.ucwords = function() {
    return this.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
}

alert("hello world".ucwords()); //Displays "Hello World"

Example: http://jsfiddle.net/LzaYH/1/

Answer 9

Simplest way

let str="hiren raiyani"
str.toLowerCase().replace(/(?<= )[^\s]|^./g, a => a.toUpperCase());

user-defined function:

function capitalize(str){
 return str.toLowerCase().replace(/(?<= )[^\s]|^./g, a => a.toUpperCase());
}

output: Hiren Raiyani

Use code as your user-defined function or direct

Answer 10

var mystring = "hello World"
mystring = mystring.substring(0,1).toUpperCase() + 
mystring.substring(1,mystring.length)

console.log(mystring) //gives you Hello World

Answer 11

It is as simple as the following:

string = 'test';
newString = string[0].toUpperCase() + string.slice(1);
alert(newString);

Answer 12

var ar = 'foo bar spam egg'.split(/\W/);
for(var i=0; i<ar.length; i++) {
  ar[i] = ar[i].substr(0,1).toUpperCase() + ar[i].substr(1,ar[i].length-1) 
}
ar.join(' '); // Foo Bar Spam Egg

Answer 13

You can try this simple code with the features of ucwords in PHP.

function ucWords(text) {
    return text.split(' ').map((txt) => (txt.substring(0, 1).toUpperCase() + txt.substring(1, txt.length))).join(' ');
}
ucWords('hello WORLD');

It will keep the Upper Cases unchanged.

Answer 14

Based completely on @Dementric 's answer, this solution is ready to call with a simple jQuery method, 'ucwords'... Thanks to everyone who contributed here!!!

$.extend({
ucwords : function(str) {
    strVal = '';
    str = str.split(' ');
    for (var chr = 0; chr < str.length; chr++) {
        strVal += str[chr].substring(0, 1).toUpperCase() + str[chr].substring(1, str[chr].length) + ' '
    }
    return strVal
}

});

EXAMPLE: This can be called using the method

var string = "this is a test";
string = $.ucwords(string); // Returns "This Is A Test"

Answer 15

You can use text-transform: capitalize; for this work -

HTML -

<input type="text" style="text-transform: capitalize;" />

JQuery -

$(document).ready(function (){
   var asdf = "WERTY UIOP";
   $('input').val(asdf.toLowerCase());
});

Try This

Note: It's only change visual representation of the string. If you alert this string it's always show original value of the string.

Answer 16

The string to lower before Capitalizing the first letter.

(Both use Jquery syntax)

function CapitaliseFirstLetter(elementId) {
    var txt = $("#" + elementId).val().toLowerCase();
    $("#" + elementId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
    return $1.toUpperCase(); }));
    }

In addition a function to Capitalise the WHOLE string:

function CapitaliseAllText(elementId) {
     var txt = $("#" + elementId).val();
     $("#" + elementId).val(txt.toUpperCase());
     }

Syntax to use on a textbox's click event:

onClick="CapitaliseFirstLetter('TextId'); return false"

Answer 17

I have used this code -

function ucword(str){
    str = str.toLowerCase().replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g, function(replace_latter) { 
        return replace_latter.toUpperCase();
    });  //Can use also /\b[a-z]/g
    return str;  //First letter capital in each word
}

var uc = ucword("good morning. how are you?");
alert(uc);

Answer 18

Html:

<input class="capitalize" name="Address" type="text" value="" />

Javascript with jQuery:

$(".capitalize").bind("keyup change", function (e) {
        if ($(this).val().length == 1)
            $(this).val($(this).val().toUpperCase());
        $(this).val($(this).val().toLowerCase().replace(/\s[\p{L}a-z]/g, function (letter) {
            return letter.toUpperCase();
        }))
    });

Answer 19

Without JQuery

String.prototype.ucwords = function() {
    str = this.trim();
    return str.replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g, function(s){
        return s.toUpperCase();
    });
};

console.log('hello world'.ucwords()); // Display Hello World

Answer 20

 var str = "HELLO WORLD HELLO WORLD HELLO WORLD HELLO WORLD";
         str = str.replace(
                        /([A-Z])([A-Z]+)/g,
        				function (a, w1, w2) {
                            return w1 + w2.toLowerCase();
                        });
alert(str);

Answer 21

Here is unicode-safe ucwords() function, which additionally respects double-lastnames like Russian Засс-Ранцев and some noble names like Honoré de Balzac, d'Artagnan, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd, etc:

String.prototype.ucwords = function() {
  return this.toLowerCase()
    .replace(/(^|\s|\-)[^\s$]/g, function(m) {
       return m.toUpperCase();
    })
    // French, Arabic and some noble names...
    .replace(/\s(Of|De|Van|Von|Ibn|Из|Ван|Фон|Ибн)\s/g, function(m) { // Honoré de Balzac, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd etc.
       return m.toLowerCase();
    })
    .replace(/(^|\s)(D|Д)(['’][^\s$])/g, function(m, p1, p2, p3) { // D'Artagnan or d'Artagnan / Д’Артаньян или д’Артаньян
       return p1 + (p1 === "" ? p2/*.toUpperCase()*/ : p2.toLowerCase()) + p3.toUpperCase();
    });
}

Answer 22

Easiest Way to uppercase first letter in JS

var string = "made in india";

string =string .toLowerCase().replace(/\b[a-z]/g, function(letter){return  letter.toUpperCase();});

alert(string );

Result: "Made In India"

Answer 23

var country= $('#country').val();

var con=country[0].toUpperCase();

ctr= country.replace(country[0], con);
   

no need to create any function just jugaaar

Answer 24

Use below function

const capitalize = (s) => {
  if (typeof s !== 'string') return ''
  return s.charAt(0).toUpperCase() + s.slice(1)
}

capitalize('test') //'Test'
capitalize('name') //'Name'