Gunakan huruf besar dalam string

183

Apa pendekatan terbaik untuk menggunakan huruf besar dalam string?

vsync
sumber
66
Jika itu untuk tampilan, gunakan CSS. text-transform:capitalize;.
kennytm
3
ini digunakan untuk mengatur atribut "title" ke elemen DOM. tanpa CSS :)
vsync
1
Juga, saya telah mengajukan pertanyaan ini, walaupun saya tahu solusinya, hanya karena saya mencoba mencarinya di situs web ini dan tidak dapat menemukan solusi yang layak, jadi menambahkannya untuk kepentingan dokumentasi.
vsync
1
@ KennyTM: transformasi teks tidak akan benar-benar memanfaatkan nilai fieds formulir, semua nilai akan disajikan dengan huruf besar, tetapi dikirim ke server apa adanya.
Marco Demaio
8
@ Marsco: Ya, itu sebabnya saya berkata "Jika itu untuk tampilan".
kennytm

Jawaban:

287
/**
 * Capitalizes first letters of words in string.
 * @param {string} str String to be modified
 * @param {boolean=false} lower Whether all other letters should be lowercased
 * @return {string}
 * @usage
 *   capitalize('fix this string');     // -> 'Fix This String'
 *   capitalize('javaSCrIPT');          // -> 'JavaSCrIPT'
 *   capitalize('javaSCrIPT', true);    // -> 'Javascript'
 */
const capitalize = (str, lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());
;

  • memperbaiki solusi Marco Demaio di mana huruf pertama dengan spasi sebelumnya tidak dikapitalisasi.
capitalize(' javascript'); // -> ' Javascript'
  • dapat menangani simbol nasional dan huruf beraksen.
capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'
  • dapat menangani tanda kutip dan kawat gigi.
capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]
dikecewakan
sumber
4
regexp bekerja seperti "Ambil semua karakter non-spasi putih (\ S) berdiri tepat di awal string (^) atau setelah karakter spasi putih apa pun (\ s) dan huruf besar"
disfated
3
Sedikit peningkatan untuk menangani string huruf besar :) ** String.prototype.capitalize = function () {return this.toLowerCase (). Ganti (/ (?: ^ | \ S) \ S / g, fungsi (a) {return a.toUpperCase ();}); }; **
SuryaPavan
1
Tolong jangan mengubah prototipe objek yang ada.
Ascherer
1
@ Dr.X, lihat add-on 'CHECK THIS OUT'.capitalize(true) -> "Check This Out",. trueParameter pikiran .
Disfated
1
@ SeaWarrior404, Anda benar, memperbarui jawaban saya dengan sintaks es6, menambahkan jsdoc dan beberapa perawatan tanda baca
cacat
216

Implementasi terpendek untuk huruf kapital dalam string adalah berikut ini menggunakan fungsi panah ES6:

'your string'.replace(/\b\w/g, l => l.toUpperCase())
// => 'Your String'

Implementasi yang kompatibel dengan ES5:

'your string'.replace(/\b\w/g, function(l){ return l.toUpperCase() })
// => 'Your String'

Regex pada dasarnya cocok dengan huruf pertama dari setiap kata dalam string yang diberikan dan hanya mengubah huruf itu menjadi huruf besar:

  • \ b cocok dengan batas kata (awal atau akhir kata);
  • \ w cocok dengan karakter-meta berikut [a-zA-Z0-9].

Untuk karakter non-ASCII, rujuk solusi ini

'ÿöur striñg'.replace(/(^|\s)\S/g, l => l.toUpperCase())

Regex ini cocok dengan huruf pertama dan setiap huruf non-spasi putih didahului dengan spasi putih dalam string yang diberikan dan hanya mengubah huruf itu menjadi huruf besar:

  • \ s pertandingan karakter spasi
  • \ S cocok dengan karakter yang bukan spasi
  • (x | y) cocok dengan salah satu alternatif yang ditentukan

Grup yang tidak menangkap bisa digunakan di sini sebagai berikut /(?:^|\s)\S/gmeskipun gbendera dalam regex kami tidak akan menangkap sub-kelompok dengan desain.

Bersulang!

Ivo
sumber
1
Bisakah Anda menjelaskan dalam jawaban bagaimana regex bekerja? (Arti masing-masing bagian)
vsync
2
Saya akan memilihnya sebagai jawaban jika penjelasannya ada di dalamnya dan bukan sebagai komentar yang bisa dilewatkan orang.
vsync
2
Ini sepertinya tidak berfungsi untuk karakter nordic ä, ö, dan å. Misalnya päijät-hämemenjadiPäIjäT-HäMe
Markus Meskanen
1
Solusi ini tidak bagus untuk konten internasional yang mengandung karakter diakritik / non-latin. EisbäRenadalah salah satu hasilnya, misalnya.
Daniel B.
3
Contoh dari @MarkusMeskanen harus berubah menjadi Päijät-Häme, tetapi setidaknya di ruang putih Chrome tidak menyertakan tanda hubung (-), sehingga bagian kedua nama tersebut tidak ditulis dengan huruf besar . Dapat diperbaiki sebagai /(^|\s|-)\S/g.
MiRin
34
function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

output: "Ini String Terburuk Yang Pernah Ada"

Memperbarui:

Tampaknya solusi ini menggantikan milik saya: https://stackoverflow.com/a/7592235/104380

vsync
sumber
hati-hati karena tampaknya fungsi Anda salah menggunakan huruf besar juga aksen, lihat jawaban saya: stackoverflow.com/questions/2332811/capitalize-words-in-string/… Saya juga melakukan protoyped.
Marco Demaio
9
Saya tidak suka prototyping, memiliki potensi untuk membuat tabrakan adalah orang lain menggunakan nama yang sama untuk prototipe String juga.
vsync
15

The jawaban yang diberikan oleh vsync bekerja selama Anda tidak memiliki huruf beraksen dalam string masukan.

Saya tidak tahu alasannya, tetapi ternyata \bdalam pertandingan regexp juga beraksen huruf (diuji pada IE8 dan Chrome), jadi string seperti "località"akan salah kapitalisasi dikonversi menjadi"LocalitÀ" (à huruf kapital akan huruf tersebut dikapitalisasi karena regexp menganggap itu kata batas)

Fungsi yang lebih umum yang berfungsi juga dengan huruf beraksen adalah yang ini:

String.prototype.toCapitalize = function()
{ 
   return this.toLowerCase().replace(/^.|\s\S/g, function(a) { return a.toUpperCase(); });
}

Anda bisa menggunakannya seperti ini:

alert( "hello località".toCapitalize() );
Marco Demaio
sumber
1
" javascript".toCapitalize() -> " javascript"
Disfated
2
KEPADA SIAPA YANG DAPAT DILAKUKAN: disfated answer stackoverflow.com/questions/2332811/capitalize-words-in-string/… sekarang menjadi jawaban terbaik di sini.
Marco Demaio
4

Karena semua orang telah memberi Anda jawaban JavaScript yang Anda minta, saya akan memasukkan properti CSS itu text-transform: capitalize akan melakukan ini.

Saya menyadari ini mungkin bukan yang Anda minta - Anda belum memberi kami salah satu konteks di mana Anda menjalankan ini - tetapi jika itu hanya untuk presentasi, saya pasti akan menggunakan alternatif CSS.

David Hedlund
sumber
KennyTM mengalahkan Anda karenanya. Periksa komentarnya di bagian pertanyaan. :-)
Buhake Sindi
Ya, saya tahu atribut CSS ini, tetapi saya perlu ini untuk atribut title ke elemen dom, dan tidak memiliki CSS apa pun, seperti yang Anda ketahui.
vsync
4

John Resig (dari jQuery fame) mem-porting skrip perl, ditulis oleh John Gruber, ke JavaScript. Skrip ini menggunakan huruf kapital dengan cara yang lebih cerdas, misalnya, huruf kapital tidak menggunakan huruf kecil seperti 'dari' dan 'dan'.

Anda dapat menemukannya di sini: Kapitalisasi Judul dalam JavaScript

meouw
sumber
4

Menggunakan JavaScript dan html

String.prototype.capitalize = function() {
  return this.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
    return p1 + p2.toUpperCase();
  });
};
<form name="form1" method="post">
  <input name="instring" type="text" value="this is the text string" size="30">
  <input type="button" name="Capitalize" value="Capitalize >>" onclick="form1.outstring.value=form1.instring.value.capitalize();">
  <input name="outstring" type="text" value="" size="30">
</form>

Pada dasarnya, Anda dapat melakukannya string.capitalize()dan itu akan menggunakan huruf kapital setiap huruf pertama dari setiap kata.

Sumber: http://www.mediacollege.com/internet/javascript/text/case-capitalize.html

Buhake Sindi
sumber
1
Saya bukan penggemar prototyping dengan cara ini, karena skrip saya terkadang adalah embed pihak ketiga di situs web lain, dan itu dapat menyebabkan masalah mengacaukan objek global seperti "String" ... jadi saya lebih suka "fucntion" saja.
vsync
1
Itulah keindahan prototipe (bukan Prototipe yang Anda unduh). Ini standar dalam javascript dan berfungsi di semua browser.
Buhake Sindi
Saya menduga itu dapat menyebabkan masalah jika orang lain sudah membuat prototip String.prototype.capitalize sendiri, dan saya tidak sengaja akan menimpanya.
vsync
1
@vsync, Anda selalu dapat memeriksa dengan melakukan ini. if (object.capitalize) {...} else {String.prototype.capitalize = function()....}di mana objek bertipe String. Jadi, sebenarnya cukup sederhana.
Buhake Sindi
4

Jawaban Ivo baik, tetapi saya lebih suka tidak cocok \wkarena tidak perlu menggunakan huruf kapital 0-9 dan AZ. Kita bisa mengabaikannya dan hanya cocok dengan az.

'your string'.replace(/\b[a-z]/g, match => match.toUpperCase())
// => 'Your String'

Ini hasil yang sama, tapi saya pikir lebih jelas dalam hal kode dokumentasi diri.

Uang besar
sumber
Ini akan gagal untuk surat non Inggris: "Är Toaletten". Jawaban Anda, bertahun-tahun setelah jawaban yang sangat baik diberikan, tidak berkontribusi pada diskusi ..
vsync
@vsync yang sepertinya cukup keras. ini merupakan pengoptimalan untuk jawaban yang diterima. /\b\w/gjuga gagal untuk huruf non-Inggris. Tidak semua orang berurusan dengan karakter unicode, dan ini akan membantu mereka yang ingin tidak.
Uang Besar
1
Baiklah .. Saya hanya tidak berpikir Anda harus menggunakan ini alih-alih jawaban atas hanya karena Anda tidak memerlukan bahasa lain selain bahasa Inggris. Itu bukan pembenaran yang cukup baik karena tidak ada penalti untuk melakukannya untuk semua karakter ASCII seperti yang dikatakan dalam pertanyaan teratas
vsync
3

Jika Anda menggunakan lodash dalam aplikasi JavaScript Anda, Anda dapat menggunakan _.kapitalisasi :

console.log( _.capitalize('ÿöur striñg') );
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

vicke4
sumber
3

Cara ES6 ringkas untuk melakukannya mungkin terlihat seperti ini.

const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

Ini hanya memperkuat huruf pertama dan tidak memengaruhi casing selebihnya.

Otman Zaib
sumber
2

Solusi saya:

String.prototype.toCapital = function () {
    return this.toLowerCase().split(' ').map(function (i) {
        if (i.length > 2) {
            return i.charAt(0).toUpperCase() + i.substr(1);
        }

        return i;
    }).join(' ');
};

Contoh:

'álL riGht'.toCapital();
// Returns 'Áll Right'
Erick Tatsui
sumber
Cobalah beberapa metode dan solusi Anda adalah yang paling efisien dan menghargai aksen nama jsbench.me/urjeu9wvql
nasatome
Ini tidak berfungsi: 'a áAA. bb . bbb .cc .d'.toCapital();=>a Áaa. bb . Bbb .cc .d
vsync
Saya membuatnya untuk tidak menganggap kata-kata dengan kurang dari 2 huruf, seperti "dari", "sebagai".
Erick Tatsui
1

Ini harus mencakup sebagian besar kasus penggunaan dasar.

const capitalize = (str) => {
    if (typeof str !== 'string') {
      throw Error('Feed me string')
    } else if (!str) {
      return ''
    } else {
      return str
        .split(' ')
        .map(s => {
            if (s.length == 1 ) {
                return s.toUpperCase()
            } else {
                const firstLetter = s.split('')[0].toUpperCase()
                const restOfStr = s.substr(1, s.length).toLowerCase()
                return firstLetter + restOfStr
            }     
        })
        .join(' ')
    }
}


capitalize('THIS IS A BOOK') // => This Is A Book
capitalize('this is a book') // => This Is A Book
capitalize('a 2nd 5 hour boOk thIs weEk') // => A 2nd 5 Hour Book This Week

Sunting: Peningkatan keterbacaan pemetaan.

Tetes
sumber
Bisakah Anda jelaskan mengapa menurut Anda jawaban Anda lebih baik daripada yang lain dari beberapa tahun yang lalu?
vsync
Bisakah Anda menjelaskan mengapa menurut Anda maksud saya bahwa jawaban saya adalah yang terbaik / atau lebih baik daripada yang lain? Saya tidak menyebutkan itu, hanya saja berbeda. Saya juga tidak melihat Anda meninggalkan komentar ini di pos lain, jadi saya benar-benar tidak mengerti. Tetapi sebagai permulaan: ia menggunakan fitur modern js (perusakan, panah gemuk, pengembalian implisit), itu tidak menggunakan regx dan itu pendekatan yang lebih fungsional untuk masalah tersebut. Juga memiliki penanganan kesalahan yang sangat mendasar dan mengembalikan string kosong jika Anda melewatinya (bagi saya itu penting).
Drops
boleh saja berbeda tetapi harus lebih baik atau sama dengan jawaban lain, dan tampaknya ... tidak dapat dibaca dan tentu saja tidak ada yang akan dimasukkan ke dalam kode produksi karena tidak ada yang bisa memahaminya
vsync
Ahhh ok, jadi 50% solusi di sini yang mana Monkeypatch String Anda benar-benar akan dimasukkan ke dalam produksi? Atau mungkin ekspresi regex yang berbelit-belit? Itu jauh lebih mudah untuk dipertimbangkan, bukan? Sama sekali tidak! Juga mengatakan bahwa tidak ada yang akan mengerti ini adalah pernyataan yang cukup subjektif. Juga untuk ini, Anda mengatakan bahwa potongan kode (lebih banyak fitur tapi itu tidak terjadi di sini). Bagaimana agar itu diparut dan solusi saya tidak akan ada yang mengerti? Tidak ada cara bahwa Anda akan mengurai regexes itu tanpa kehilangan jam.
Drops
Kode itu ditulis oleh Mr. Resig sendiri dan tidak boleh dipertanyakan. Anda, di sisi lain tidak memiliki kredibilitas, karena anonimitas Anda. Apapun, solusi Regex lebih pendek, berjalan lebih cepat dan juga mudah dibaca oleh siapa pun yang belajar di dasar-dasar Regex. Hampir tidak ada banyak yang harus diuraikan: /\b\w/g...
vsync
1

Dosis solusi ini tidak menggunakan regex, mendukung karakter beraksen dan juga didukung oleh hampir setiap browser.

function capitalizeIt(str) {
    if (str && typeof(str) === "string") {
        str = str.split(" ");    
        for (var i = 0, x = str.length; i < x; i++) {
            if (str[i]) {
                str[i] = str[i][0].toUpperCase() + str[i].substr(1);
            }
        }
        return str.join(" ");
    } else {
        return str;
    }
}    

Pemakaian:

console.log (capitalizeIt ('çao 2nd inside Javascript program'));

Keluaran:

Çao 2nd Inside Javascript Programme

Nabarag Paul
sumber
1
Cara ini menghabiskan banyak sumber daya CPU. JavaScript tidak mengubah nilai primitif, yang menyiratkan pembuatan yang baru setiap kali operasi dilakukan. Lebih baik menggunakan fungsi asli seperti "ganti ', exempli gratia.
Daniel Bandeira
0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html adalah salah satu dari banyak jawaban di luar sana.

Google dapat menjadi semua yang Anda butuhkan untuk masalah seperti itu.

Pendekatan naif adalah dengan membagi string dengan spasi, huruf besar huruf pertama dari setiap elemen dari array yang dihasilkan dan bergabung kembali bersama-sama. Ini meninggalkan kapitalisasi yang ada sendirian (mis. HTML tetap HTML dan tidak menjadi sesuatu yang konyol seperti Html). Jika Anda tidak menginginkannya, ubah seluruh string menjadi huruf kecil sebelum membaginya.

Alan Plum
sumber
0

Kode ini menggunakan huruf kapital kata setelah titik:

function capitalizeAfterPeriod(input) { 
    var text = '';
    var str = $(input).val();
    text = convert(str.toLowerCase().split('. ')).join('. ');
    var textoFormatado = convert(text.split('.')).join('.');
    $(input).val(textoFormatado);
}

function convert(str) {
   for(var i = 0; i < str.length; i++){
      str[i] = str[i].split('');
      if (str[i][0] !== undefined) {
         str[i][0] = str[i][0].toUpperCase();
      }
      str[i] = str[i].join('');
   }
   return str;
}
Flavio
sumber
0

Saya suka pergi dengan proses yang mudah. Pertama Ubah string menjadi Array untuk iterasi mudah, kemudian menggunakan fungsi peta mengubah setiap kata seperti yang Anda inginkan.

function capitalizeCase(str) {
    var arr = str.split(' ');
    var t;
    var newt;
    var newarr = arr.map(function(d){
        t = d.split('');
        newt = t.map(function(d, i){
                  if(i === 0) {
                     return d.toUpperCase();
                    }
                 return d.toLowerCase();
               });
        return newt.join('');
      });
    var s = newarr.join(' ');
    return s;
  }
Mritunjay Upadhyay
sumber
0

Jquery atau Javascipt tidak menyediakan metode bawaan untuk mencapai ini.

Transformasi uji CSS (text-transform: capitalize;) tidak benar-benar memanfaatkan data string tetapi menunjukkan rendering yang dikapitalisasi di layar.

Jika Anda mencari cara yang lebih sah untuk mencapai ini di tingkat data menggunakan vanillaJS biasa, gunakan solusi ini =>

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}
siwalikm
sumber
0

Gunakan ini:

String.prototype.toTitleCase = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

let str = 'text';
document.querySelector('#demo').innerText = str.toTitleCase();
<div class = "app">
  <p id = "demo"></p>
</div>

Sanjay
sumber
0

Anda dapat menggunakan yang berikut ini untuk menggunakan huruf besar dalam string:

function capitalizeAll(str){

    var partes = str.split(' ');

    var nuevoStr = ""; 

    for(i=0; i<partes.length; i++){
    nuevoStr += " "+partes[i].toLowerCase().replace(/\b\w/g, l => l.toUpperCase()).trim(); 
    }    

    return nuevoStr;

}
Marcos Torres
sumber
0

Ada juga locutus: https://locutus.io/php/strings/ucwords/ yang mendefinisikannya seperti ini:

function ucwords(str) {
  //  discuss at: http://locutus.io/php/ucwords/
  // original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // improved by: Waldo Malqui Silva (http://waldo.malqui.info)
  // improved by: Robin
  // improved by: Kevin van Zonneveld (http://kvz.io)
  // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
  // bugfixed by: Cetvertacov Alexandr (https://github.com/cetver)
  //    input by: James (http://www.james-bell.co.uk/)
  //   example 1: ucwords('kevin van  zonneveld')
  //   returns 1: 'Kevin Van  Zonneveld'
  //   example 2: ucwords('HELLO WORLD')
  //   returns 2: 'HELLO WORLD'
  //   example 3: ucwords('у мэри был маленький ягненок и она его очень любила')
  //   returns 3: 'У Мэри Был Маленький Ягненок И Она Его Очень Любила'
  //   example 4: ucwords('τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός')
  //   returns 4: 'Τάχιστη Αλώπηξ Βαφής Ψημένη Γη, Δρασκελίζει Υπέρ Νωθρού Κυνός'

  return (str + '').replace(/^(.)|\s+(.)/g, function ($1) {
    return $1.toUpperCase();
  });
};
geoides
sumber
0

Saya akan menggunakan regex untuk tujuan ini:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
Keterangan Teks
sumber