Konversi string ke judul huruf dengan JavaScript

Apakah ada cara sederhana untuk mengubah string ke judul kasus? Misalnya john smithmenjadi John Smith. Saya tidak mencari sesuatu yang rumit seperti solusi John Resig , hanya (semoga) semacam satu atau dua liner.

Coba ini:

    function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }

<form>
Input:
<br /><textarea name="input" onchange="form.output.value=toTitleCase(this.value)"  onkeyup="form.output.value=toTitleCase(this.value)"></textarea>
<br />Output:
<br /><textarea name="output" readonly onclick="select(this)"></textarea>
</form>

Cara yang sedikit lebih elegan, mengadaptasi fungsi Greg Dean:

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

Sebut saja seperti:

"pascal".toProperCase();

Cobalah untuk menerapkan gaya CSS transformasi teks ke kontrol Anda.

misalnya: (text-transform: capitalize);

Hanya gunakan pendekatan JS jika benar-benar diperlukan.

Ini versi saya, IMO juga mudah dimengerti dan elegan.

var str = "foo bar baz"

console.log(

str.split(' ')
   .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
   .join(' ')

)
// returns "Foo Bar Baz"

Inilah fungsi saya yang mengonversi ke case title tetapi juga mempertahankan akronim yang didefinisikan sebagai huruf besar dan kata-kata kecil sebagai huruf kecil:

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^\W_]+[^\s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At', 
  'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), 
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), 
      uppers[i].toUpperCase());

  return str;
}

Sebagai contoh:

"TO LOGIN TO THIS SITE and watch tv, please enter a valid id:".toTitleCase();
// Returns: "To Login to This Site and Watch TV, Please Enter a Valid ID:"

Saya lebih suka yang berikut daripada jawaban lainnya. Hanya cocok dengan huruf pertama dari setiap kata dan huruf besar. Kode lebih sederhana, lebih mudah dibaca dan lebih sedikit byte. Ini mempertahankan huruf kapital yang ada untuk mencegah akronim yang menyimpang. Namun Anda selalu dapat memanggil toLowerCase()string Anda terlebih dahulu.

function title(str) {
  return str.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

Anda dapat menambahkan ini ke prototipe string yang memungkinkan Anda melakukan hal 'my string'.toTitle()berikut:

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

Contoh:

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

console.log('all lower case ->','all lower case'.toTitle());
console.log('ALL UPPER CASE ->','ALL UPPER CASE'.toTitle());
console.log("I'm a little teapot ->","I'm a little teapot".toTitle());

Tanpa menggunakan regex hanya untuk referensi:

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i = 0; i < words.length; i++) {
    var letter = words[i].charAt(0).toUpperCase();
    results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

console.log(
  'john smith'.toProperCase()
)

Anda dapat langsung toLowerCasemembuat string, dan kemudian hanya toUpperCasehuruf pertama dari setiap kata. Menjadi 1 liner yang sangat sederhana:

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

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));

Kalau-kalau Anda khawatir tentang kata-kata pengisi, Anda selalu dapat hanya memberitahu fungsi apa yang tidak untuk memanfaatkan.

/**
 * @param String str The text to be converted to titleCase.
 * @param Array glue the words to leave in lowercase. 
 */
var titleCase = function(str, glue){
    glue = (glue) ? glue : ['of', 'for', 'and'];
    return str.replace(/(\w)(\w*)/g, function(_, i, r){
        var j = i.toUpperCase() + (r != null ? r : "");
        return (glue.indexOf(j.toLowerCase())<0)?j:j.toLowerCase();
    });
};

Semoga ini bisa membantu Anda.

sunting

Jika Anda ingin menangani kata lem terkemuka, Anda dapat melacak ini dengan satu variabel lagi:

var titleCase = function(str, glue){
    glue = !!glue ? glue : ['of', 'for', 'and', 'a'];
    var first = true;
    return str.replace(/(\w)(\w*)/g, function(_, i, r) {
        var j = i.toUpperCase() + (r != null ? r : '').toLowerCase();
        var result = ((glue.indexOf(j.toLowerCase()) < 0) || first) ? j : j.toLowerCase();
        first = false;
        return result;
    });
};

Jika regex yang digunakan dalam solusi di atas membuat Anda bingung, coba kode ini:

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}

Saya membuat fungsi ini yang dapat menangani nama belakang (jadi bukan judulnya) seperti "McDonald" atau "MacDonald" atau "O'Toole" atau "D'Orazio". Namun itu tidak menangani nama Jerman atau Belanda dengan "van" atau "von" yang sering kali dalam huruf kecil ... Saya percaya "de" sering kali lebih rendah juga seperti "Robert de Niro". Ini masih harus ditangani.

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function($1, $2, $3, $4, $5) { if($2){return $3.toUpperCase()+$4+$5.toUpperCase();} return $1.toUpperCase(); });
}

var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

Tampaknya bekerja ... Diuji dengan di atas, "rubah cepat berwarna coklat, rubah? / Melompati ^ si malas! Anjing ..." dan "C: / file program / beberapa vendor / aplikasi kedua / a file1.txt ".

Jika Anda menginginkan 2Nd bukannya 2, Anda dapat mengubah ke /([a-z])(\w*)/g .

Bentuk pertama dapat disederhanakan sebagai:

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}

Coba ini

String.prototype.toProperCase = function(){
    return this.toLowerCase().replace(/(^[a-z]| [a-z]|-[a-z])/g, 
        function($1){
            return $1.toUpperCase();
        }
    );
};

Contoh

var str = 'john smith';
str.toProperCase();

Jika Anda dapat menggunakan perpustakaan pihak ketiga dalam kode Anda maka lodash memiliki fungsi pembantu bagi kami.

https://lodash.com/docs/4.17.3#startCase

_.startCase('foo bar');
// => 'Foo Bar'

_.startCase('--foo-bar--');
// => 'Foo Bar'
 
_.startCase('fooBar');
// => 'Foo Bar'
 
_.startCase('__FOO_BAR__');
// => 'FOO BAR'

Coba ini, cara terpendek:

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());

ES 6

str.split(' ')
   .map(s => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())
   .join(' ')

lain

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')

Sebagian besar jawaban ini tampaknya mengabaikan kemungkinan menggunakan kata batas metacharacter (\ b). Versi pendek dari jawaban Greg Dean memanfaatkannya:

function toTitleCase(str)
{
    return str.replace(/\b\w/g, function (txt) { return txt.toUpperCase(); });
}

Bekerja untuk nama yang ditulis dgn tanda penghubung seperti Jim-Bob juga.

Saya pikir yang paling sederhana adalah menggunakan css.

function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}

Gunakan /\S+/guntuk mendukung diakritik:

function toTitleCase(str) {
  return str.replace(/\S+/g, str => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase());
}

console.log(toTitleCase("a city named örebro")); // A City Named Örebro

Namun: " s unshine ( y ellow)" ⇒ " S unshine ( y ellow)"

Saya ingin menambahkan jawaban saya sendiri karena saya membutuhkan toTitleCasefungsi yang kuat yang memperhitungkan aturan tata bahasa yang tercantum di sini (artikel yang direkomendasikan Google). Ada berbagai aturan yang bergantung pada panjang string input. Di bawah ini adalah tes fungsi + unit.

Fungsi ini juga mengkonsolidasikan spasi putih dan menghapus karakter khusus (memodifikasi regex untuk kebutuhan Anda)

Fungsi toTitleCase

const toTitleCase = (str) => {
  const articles = ['a', 'an', 'the'];
  const conjunctions = ['for', 'and', 'nor', 'but', 'or', 'yet', 'so'];
  const prepositions = [
    'with', 'at', 'from', 'into','upon', 'of', 'to', 'in', 'for',
    'on', 'by', 'like', 'over', 'plus', 'but', 'up', 'down', 'off', 'near'
  ];

  // The list of spacial characters can be tweaked here
  const replaceCharsWithSpace = (str) => str.replace(/[^0-9a-z&/\\]/gi, ' ').replace(/(\s\s+)/gi, ' ');
  const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.substr(1);
  const normalizeStr = (str) => str.toLowerCase().trim();
  const shouldCapitalize = (word, fullWordList, posWithinStr) => {
    if ((posWithinStr == 0) || (posWithinStr == fullWordList.length - 1)) {
      return true;
    }

    return !(articles.includes(word) || conjunctions.includes(word) || prepositions.includes(word));
  }

  str = replaceCharsWithSpace(str);
  str = normalizeStr(str);

  let words = str.split(' ');
  if (words.length <= 2) { // Strings less than 3 words long should always have first words capitalized
    words = words.map(w => capitalizeFirstLetter(w));
  }
  else {
    for (let i = 0; i < words.length; i++) {
      words[i] = (shouldCapitalize(words[i], words, i) ? capitalizeFirstLetter(words[i], words, i) : words[i]);
    }
  }

  return words.join(' ');
}

Unit Tes untuk Memastikan Kebenaran

import { expect } from 'chai';
import { toTitleCase } from '../../src/lib/stringHelper';

describe('toTitleCase', () => {
  it('Capitalizes first letter of each word irrespective of articles, conjunctions or prepositions if string is no greater than two words long', function(){
    expect(toTitleCase('the dog')).to.equal('The Dog'); // Capitalize articles when only two words long
    expect(toTitleCase('for all')).to.equal('For All'); // Capitalize conjunctions when only two words long
    expect(toTitleCase('with cats')).to.equal('With Cats'); // Capitalize prepositions when only two words long
  });

  it('Always capitalize first and last words in a string irrespective of articles, conjunctions or prepositions', function(){
    expect(toTitleCase('the beautiful dog')).to.equal('The Beautiful Dog');
    expect(toTitleCase('for all the deadly ninjas, be it so')).to.equal('For All the Deadly Ninjas Be It So');
    expect(toTitleCase('with cats and dogs we are near')).to.equal('With Cats and Dogs We Are Near');
  });

  it('Replace special characters with space', function(){
    expect(toTitleCase('[wolves & lions]: be careful')).to.equal('Wolves & Lions Be Careful');
    expect(toTitleCase('wolves & lions, be careful')).to.equal('Wolves & Lions Be Careful');
  });

  it('Trim whitespace at beginning and end', function(){
    expect(toTitleCase(' mario & Luigi superstar saga ')).to.equal('Mario & Luigi Superstar Saga');
  });

  it('articles, conjunctions and prepositions should not be capitalized in strings of 3+ words', function(){
    expect(toTitleCase('The wolf and the lion: a tale of two like animals')).to.equal('The Wolf and the Lion a Tale of Two like Animals');
    expect(toTitleCase('the  three Musketeers  And plus ')).to.equal('The Three Musketeers and Plus');
  });
});

Harap dicatat bahwa saya menghapus sedikit karakter khusus dari string yang disediakan. Anda perlu mengubah regex untuk memenuhi persyaratan proyek Anda.

"john f. kennedy".replace(/\b\S/g, t => t.toUpperCase())

Mengambil solusi "lewax00", saya menciptakan solusi sederhana ini yang memaksa "w" dimulai dengan spasi atau "w" yang memulai kata, tetapi tidak dapat menghapus ruang perantara tambahan.

"SOFÍA vergara".toLowerCase().replace(/\b(\s\w|^\w)/g, function (txt) { return txt.toUpperCase(); });

Hasilnya adalah "Sofía Vergara".

Inilah fungsi saya yang menangani karakter beraksen (penting untuk bahasa Prancis!) Dan yang dapat menghidupkan / mematikan penanganan pengecualian yang lebih rendah. Semoga itu bisa membantu.

String.prototype.titlecase = function(lang, withLowers = false) {
    var i, string, lowers, uppers;

    string = this.replace(/([^\s:\-'])([^\s:\-']*)/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }).replace(/Mc(.)/g, function(match, next) {
        return 'Mc' + next.toUpperCase();
    });

    if (withLowers) {
        if (lang == 'EN') {
            lowers = ['A', 'An', 'The', 'At', 'By', 'For', 'In', 'Of', 'On', 'To', 'Up', 'And', 'As', 'But', 'Or', 'Nor', 'Not'];
        }
        else {
            lowers = ['Un', 'Une', 'Le', 'La', 'Les', 'Du', 'De', 'Des', 'À', 'Au', 'Aux', 'Par', 'Pour', 'Dans', 'Sur', 'Et', 'Comme', 'Mais', 'Ou', 'Où', 'Ne', 'Ni', 'Pas'];
        }
        for (i = 0; i < lowers.length; i++) {
            string = string.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), function(txt) {
                return txt.toLowerCase();
            });
        }
    }

    uppers = ['Id', 'R&d'];
    for (i = 0; i < uppers.length; i++) {
        string = string.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), uppers[i].toUpperCase());
    }

    return string;
}

Kami telah melakukan diskusi di sini di kantor dan kami berpikir bahwa mencoba untuk secara otomatis memperbaiki cara orang memasukkan nama dengan cara yang Anda inginkan saat ini penuh dengan kemungkinan masalah.

Kami telah menemukan beberapa kasus di mana berbagai jenis kapitalisasi otomatis berantakan dan ini hanya untuk nama bahasa Inggris saja, setiap bahasa memiliki kompleksitasnya sendiri.

Masalah dengan huruf besar huruf pertama dari setiap nama:

• Akronim seperti IBM tidak diizinkan dimasukkan, akan berubah menjadi Ibm.

• Nama McDonald akan berubah menjadi Mcdonald yang tidak benar, hal yang sama juga MacDonald.

• Nama ganda laras seperti Marie-Tonks akan berubah menjadi Marie-tonks.

• Nama seperti O'Connor akan berubah menjadi O'connor.

Untuk sebagian besar dari ini, Anda dapat menulis aturan khusus untuk menghadapinya, namun, ini masih memiliki masalah dengan Akronim seperti sebelumnya dan Anda mendapatkan masalah baru:

• Menambahkan aturan untuk memperbaiki nama dengan Mac seperti MacDonald, akankah nama-nama seperti Macy mengubahnya menjadi MacY.

Satu-satunya solusi yang kami temukan yang tidak pernah salah adalah dengan memanfaatkan setiap huruf yang merupakan metode brute force yang tampaknya juga digunakan DBS.

Jadi, jika Anda ingin mengotomatiskan prosesnya, sama baiknya tidak mungkin dilakukan tanpa kamus dari setiap nama dan kata tunggal dan bagaimana itu harus dikapitalisasi, Jika Anda tidak memiliki aturan yang mencakup segala sesuatu jangan menggunakannya seperti itu hanya akan mengganggu pengguna Anda dan meminta orang yang ingin memasukkan nama mereka dengan benar untuk pergi ke tempat lain.

inilah solusi lain menggunakan css (dan javascript, jika teks yang ingin Anda ubah ada dalam huruf besar):

html

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

css

#text{text-transform:capitalize;}

Bagi kita yang takut dengan ekspresi reguler (tertawa):

function titleCase(str)
{
    var words = str.split(" ");
    for ( var i = 0; i < words.length; i++ )
    {
        var j = words[i].charAt(0).toUpperCase();
        words[i] = j + words[i].substr(1);
    }
    return words.join(" ");
}

Solusi satu baris saya:

String.prototype.capitalizeWords = function() {
    return this.split(" ").map(function(ele){ return ele[0].toUpperCase() + ele.slice(1).toLowerCase();}).join(" ");
};

Kemudian, Anda dapat memanggil metode capitalizeWords()pada sembarang string. Sebagai contoh:

var myS = "this actually works!";
myS.capitalizeWords();

>>> This Actually Works

Solusi saya yang lain:

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeAllWords = function() {
    var arr = this.split(" ");
    for(var i = 0; i < arr.length; i++) {
        arr[i] = capitalizeFirstLetter(arr[i]);
    }
    return arr.join(" ");
};

Kemudian, Anda dapat memanggil metode capitalizeWords()pada sembarang string. Sebagai contoh:

var myStr = "this one works too!";
myStr.capitalizeWords();

>>> This One Works Too

Solusi alternatif berdasarkan jawaban Greg Dean:

function capitalizeFirstLetter(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
}
String.prototype.capitalizeWords = function() {
    return this.replace(/\w\S*/g, capitalizeFirstLetter);
};

Kemudian, Anda dapat memanggil metode capitalizeWords()pada sembarang string. Sebagai contoh:

var myString = "yes and no";
myString.capitalizeWords()

>>> Yes And No

Terkejut melihat tidak ada yang menyebutkan penggunaan parameter sisanya. Berikut ini adalah liner sederhana yang menggunakan parameter ES6 Rest.

let str="john smith"
str=str.split(" ").map(([firstChar,...rest])=>firstChar.toUpperCase()+rest.join("").toLowerCase()).join(" ")
console.log(str)

Ini didasarkan pada solusi saya untuk Bonfire "Title Case" FreeCodeCamp , yang mengharuskan Anda untuk terlebih dahulu mengonversi string yang diberikan ke semua huruf kecil dan kemudian mengonversi setiap karakter yang melanjutkan spasi ke huruf besar.

Tanpa menggunakan regex:

function titleCase(str) {
 return str.toLowerCase().split(' ').map(function(val) { return val.replace(val[0], val[0].toUpperCase()); }).join(' ');
}