Huruf besar huruf pertama variabel

89

Saya telah mencari di web tidak dapat menemukan apa pun untuk membantu saya. Saya ingin membuat huruf pertama dari setiap kata menjadi huruf besar dalam variabel.

Sejauh ini saya sudah mencoba:

toUpperCase();

Dan tidak beruntung, karena huruf besar semua huruf.

ryryan
sumber

Jawaban:

228

Gunakan fungsi .replace[MDN] untuk mengganti huruf kecil yang mengawali kata dengan huruf kapital.

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


Sunting: Jika Anda berurusan dengan karakter kata selain hanya az, ekspresi reguler berikut (lebih rumit) mungkin lebih sesuai dengan tujuan Anda.

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 Αλφα"

Peter Olson
sumber
1
Ini tidak bekerja dengan nama seperti Björn Lüchinger, ini menjadi BjöRn LüChinger. Ada perbaikan untuk ini?
Dediqated
2
@Dediqated Terima kasih telah menunjukkan hal itu, beri tahu saya jika pengeditan membantu.
Peter Olson
Bekerja dengan baik! Adakah petunjuk tentang apa yang harus dimodifikasi jika saya hanya ingin mengonversi karakter pertama ke huruf besar menjadi huruf besar? (alih-alih setiap kata)
Andres SK
6
@andufo Tentu, itu sebenarnya jauh lebih sederhana untuk dilakukan. Cukup gunakanstr[0].toUpperCase() + str.slice(1)
Peter Olson
@PeterOlson terima kasih atas jawabannya! Saya akhirnya menggunakan var first = str.slice(0, str.indexOf(' ')); str = first.toLowerCase().replace(/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g, function(letter) { return letter.toUpperCase(); }) + str.substr(first.length);untuk menutupi karakter khusus juga.
Andres SK
73

Cara yang jauh lebih mudah:

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

Saya harus memberi @Dementic beberapa pujian karena telah membawa saya ke jalan yang benar. Jauh lebih sederhana dari apapun yang kalian usulkan.

vbullinger.dll
sumber
32
Ini hanya mengubah representasi visual dari string dan bukan nilai string itu sendiri.
toxaq
1
Anda tidak dapat menerapkan ini ke variabel yang diambil dari DB, tetapi untuk contoh lain metode ini sangat bersih
Armand
3
Catatan: text-transform:capitalizetidak akan mempengaruhi SEMUA HURUF BESAR.
Bob Stein
1
Bagaimana jika string (variabel) harus digunakan untuk beberapa operasi selain hanya menampilkan?
Fr0zenFyr
perhatikan bahwa itu akan menyimpan input dengan
huruf
25

http://phpjs.org/functions/ucwords:569 memiliki contoh yang bagus

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

(komentar fungsi dihilangkan dari sumber agar singkatnya. silakan lihat sumber tertaut untuk detailnya)

EDIT: Harap dicatat bahwa fungsi ini membuat huruf besar pertama dari setiap kata (seperti yang ditanyakan pertanyaan Anda) dan bukan hanya huruf pertama dari sebuah string (seperti yang diminta judul pertanyaan Anda)

Jonathan Fingland
sumber
Ini bekerja lebih baik daripada solusi yang diterima yang menggunakan huruf besar pada kata-kata dalam kalimat setelah tanda kutip, jadi misalnya, "Saya adalah contoh" menjadi "Saya Contoh"
lizardhr
Tidak berfungsi jika Anda memiliki garis bawah di string asli Anda, tambahkan ke REGEX Anda untuk kinerja yang lebih baik. TY
Ruslan Abuzant
1
@RuslanAbuzant Itu akan menjawab pertanyaan yang berbeda. Menafsirkan garis bawah sebagai pemisah kata (atau spasi kosong umum) boleh-boleh saja, tetapi bukan itu yang diminta OP ... dan bahkan mungkin merusak kasus penggunaannya.
Jonathan Fingland
1
ucwords () menyebalkan. Itu tidak bekerja dengan Unicode (terutama dengan huruf cyrillic, yunani dan Eropa tengah lainnya). Lebih baik gunakan mb_convert_case () di back-end, misalnya: mb_convert_case ($ _ POST ['nama'], MB_CASE_TITLE, 'utf-8');
Aleksey Kuznetsov
15

hanya ingin menambahkan solusi javascript murni (tanpa 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'));

Rafael Herscovici
sumber
1
makasih bro, baru mau mengoreksi sesuatu. ini c < str.length;seharusnyachr < str.length;
Leysam Rosario
13

Saya membayangkan Anda bisa menggunakan substring () dan toUpperCase () untuk mengeluarkan karakter pertama, huruf besar, dan kemudian mengganti karakter pertama dari string Anda dengan hasilnya.

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

Saya pikir itu seharusnya berhasil untuk Anda. Hal lain yang perlu dipertimbangkan adalah jika data ini ditampilkan, Anda dapat menambahkan kelas ke penampungnya yang memiliki properti CSS "text-transform: capitalize".

Fudgie
sumber
seharusnya tidak ada seperti firstChar = firstChar.toUpperCase (); ? Saya mencoba kode di Node.js dan saya harus melakukannya atau tidak ada yang berubah!
Adrian Adaine
9

Untuk melakukan ini, Anda bahkan tidak membutuhkan Javascript jika Anda akan menggunakannya

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

Mengapa tidak melakukan ini seperti css

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

atau lakukan sebagai kelas dan terapkan kelas itu ke mana pun Anda membutuhkannya

.ucwords { text-transform: capitalize; }
Bruce Smith
sumber
4
Selamat datang di Stackoverflow. Jawaban Anda menyarankan alternatif (yang mungkin benar-benar valid dalam beberapa kasus penggunaan), tetapi tidak benar-benar menjawab pertanyaan tersebut. Ketika saya memahami pertanyaannya, penulis ingin benar-benar mengubah variabel Javascript, dan bukan hanya representasi visual.
helmbert
3
Ya, tetapi orang lain yang datang ke pertanyaan ini mungkin baik-baik saja dengan jawaban javascript ATAU css, seperti saya, dan ini sangat membantu ...
Brian Powell
6

Pernah dengar substr() ?

Untuk pemula:

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


[Memperbarui:]

Terima kasih kepada @FelixKling untuk tipnya:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});
Nol
sumber
4
Alih-alih memanggil text() empat kali, teruskan fungsi ke text():$("#test").text(function(i, text) { return text.substr(0,1).toUpperCase()+text.substr(1);});
Felix Kling
1
menggali korps lama di sini, tetapi jika diketahui isinya masuk ke dalam elemen, akan jauh lebih mudah untuk digunakan:$('#test').style.textTransform='capitalize';
Rafael Herscovici
Tutup, @Dementik, tetapi seharusnya: $('#test').css('textTransform', 'capitalize'); BTW, ini jawaban terbaik di sini. Saya akan mengirimkannya sebagai jawaban.
vbullinger
@vbullinger - jangan menilai kode saya ketika saya menulisnya dalam keadaan mabuk :) dan saya suka js, bukan jq, jadi kode saya salah, tetapi tidak terlalu banyakdocument.getElementById('test').style.textTransform='capitalize';
Rafael Herscovici
5

Berdasarkan jawaban @ peter-olson, saya mengambil pendekatan yang lebih berorientasi objek tanpa 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"

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

mmalone
sumber
Ini benar-benar cara yang paling tepat, menurut saya. Saya akan menyebutnya toUpperCaseWordssesuai dengan javascript toUpperCase()dantoLowerCase()
AB Carroll
5

Cara paling sederhana

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

fungsi yang ditentukan pengguna:

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

keluaran: Hiren Raiyani

Gunakan kode sebagai fungsi yang ditentukan pengguna atau langsung

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

console.log(mystring) //gives you Hello World
Nick Chan Abdullah
sumber
3
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
erickb
sumber
3

Anda dapat mencoba kode sederhana ini dengan fitur ucwords di PHP.

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

Ini akan menjaga Kasus Atas tidak berubah.

IamMHussain
sumber
3

Ini sesederhana berikut ini:

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

Berdasarkan jawaban @Dementric sepenuhnya, solusi ini siap dipanggil dengan metode jQuery sederhana, 'ucwords' ... Terima kasih kepada semua orang yang berkontribusi di sini !!!

$.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
}

});

CONTOH: Ini bisa disebut menggunakan metode

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

Anda dapat menggunakan text-transform: capitalize;untuk pekerjaan ini -

HTML -

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

JQuery -

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

Coba ini

Catatan: Ini hanya mengubah representasi visual dari string. Jika Anda memperingatkan string ini, itu selalu menunjukkan nilai asli dari string tersebut.

Ishan Jain
sumber
0

String yang diturunkan sebelum Kapitalisasi huruf pertama.

(Keduanya menggunakan sintaks Jquery)

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

Selain fungsi untuk memanfaatkan string SELURUH:

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

Sintaks yang akan digunakan pada acara klik kotak teks:

onClick="CapitaliseFirstLetter('TextId'); return false"
Rubyist
sumber
0

Saya telah menggunakan kode ini -

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);
Chinmay235
sumber
0

Html:

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

Javascript dengan 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();
        }))
    });
Robert Benyi
sumber
0

Tanpa 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
GerardMetal
sumber
0

 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);

Batu
sumber
0

Berikut adalah fungsi ucwords () yang aman untuk unicode, yang juga menghormati nama belakang ganda seperti Rusia Засс-Ранцев dan beberapa nama mulia seperti Honoré de Balzac, d'Artagnan, Vincent van Gogh, Otto von Bismarck, Sulaymān ibn Dāwūd, dll:

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();
    });
}
Aleksey Kuznetsov
sumber
0

Cara termudah untuk huruf besar pertama di JS

var string = "made in india";

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

alert(string );

Hasil: "Made In India"

Cintai Kumar
sumber
0
var country= $('#country').val();

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

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

tidak perlu membuat fungsi apapun hanya jugaaar

Shahid
sumber