Uppercase first letter of variable

Question

I have searched over the web and I 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 I didn't have any luck, as it uppercases all letters.

Answer 1

Use the .replace 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!"

---

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

A much easier way:

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

I have to give Rafael Herscovici some credit for leading me down the right path. It is 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

Here is 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');

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

It is as simple as the following:

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

Answer 8

Ever heard of substr()?

For a starter:

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

Thanks to @FelixKling for the tip:

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

Answer 9

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 10

The 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 11

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

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

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 Rafael Herscovici's answer, this solution is ready to call with a simple jQuery method, 'ucwords'...

$.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 changing the visual representation of the string. If you alert() this string, it will always show the original value of the string.

Answer 16

Use the below function:

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

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

Answer 17

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 18

The easiest way to uppercase the first letter in JavaScript

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 19

There sure are a lot of ways to do this!

One thing that I think people forget is that strings are arrays of characters. So, the first letter of any string will be the 'zeroth' element of its array:

let word = 'interesting';
console.log(word[0]);
// 'i'

The simplest way to take advantage of this fact for the purpose of uppercasing the first letter (afaik) would be:

let word = 'interesting';
let titleCase = word[0].toUpperCase() + word.substr(1);
console.log(titleCase);
// 'Interesting'

...or as a function:

function toTitleCase(word) {
    return word[0].toUpperCase() + word.substr(1);
}

Answer 20

Short and simple answer:

let str = 'this is a string';

let result = str.replace(/\b\w/g, x => x.toUpperCase());

console.log(result); // This Is A String

Answer 21

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 22

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 23

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 24

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 25

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 26

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

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

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

There isn't any need to create any function, just jugaaar.

Answer 27

I think, the method should not convert any other letters than just the very first or the very first of any letter.

My solution for that are the following regexes:

function capitalize( str ){
    return str.replace(/^\w/, (s) => s.toUpperCase() );
}

function capitalizeAll( str ){
    return str.replace(/(\b\w)/g, (s) => s.toUpperCase() );
}

let test = 'hello world';

capitalize( test ); // Hello world
capitalizeAll( test ); // Hello World