Primeira letra maiúscula da variável

90

Eu tenho pesquisado na web e não consigo encontrar nada para me ajudar. Desejo tornar a primeira letra de cada palavra maiúscula dentro de uma variável.

Até agora eu tentei:

toUpperCase();

E não teve sorte, pois coloca todas as letras maiúsculas.

ryryan
fonte

Respostas:

229

Use a função .replace[MDN] para substituir as letras minúsculas que começam uma palavra pela letra maiúscula.

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


Editar: se você estiver lidando com caracteres de palavras diferentes de az, a seguinte expressão regular (mais complicada) pode se adequar melhor aos seus objetivos.

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
fonte
1
Isso não funciona com nomes como Björn Lüchingereste se torna BjöRn LüChinger. Alguma correção para isso?
Dedicado em
2
@Dediqated Obrigado por apontar isso, deixe-me saber se a edição ajudar.
Peter Olson
Funciona bem! Alguma dica sobre qual deveria ser a modificação se eu apenas quisesse converter em maiúsculas o primeiro caractere da string? (em vez de cada palavra)
Andres SK
6
@andufo Claro, isso é muito mais simples de fazer. Basta usarstr[0].toUpperCase() + str.slice(1)
Peter Olson
@PeterOlson obrigado pela resposta! Acabei usando 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);para cobrir personagens especiais também.
Andres SK
73

Maneira muito mais fácil:

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

Eu tenho que dar a @Dementic algum crédito por me guiar no caminho certo. Muito mais simples do que o que vocês estão propondo.

vbullinger
fonte
32
Isso altera apenas a representação visual da string e não o valor da string em si.
toxaq
1
No entanto, você não pode aplicar isso a variáveis ​​buscadas no banco de dados, mas para outras instâncias, este método é muito limpo
Armand
3
Nota: text-transform:capitalizenão afetará TODAS AS MAIÚSCULAS.
Bob Stein
1
E se a string (variável) deve ser usada para alguma operação diferente de apenas exibir?
Fr0zenFyr
note que ele salvará a entrada com maiúsculas, apenas a converterá na visualização
Sherif Elkassaby
25

http://phpjs.org/functions/ucwords:569 tem um bom exemplo

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

(omitido o comentário da função da fonte por questões de brevidade. Consulte a fonte vinculada para obter detalhes)

EDITAR: Por favor, note que esta função maiúscula a primeira letra de cada palavra (como sua pergunta pede) e não apenas a primeira letra de uma string (como o título de sua pergunta pede)

Jonathan Fingland
fonte
Isso funciona melhor do que a solução aceita que coloca palavras em letras maiúsculas em uma frase após o apóstrofo, então, por exemplo, "Sou um exemplo" torna-se "Sou um exemplo"
lizardhr
Não funciona se você tiver um sublinhado na string original, adicione-o ao REGEX para melhor desempenho. TY
Ruslan Abuzant
1
@RuslanAbuzant Isso seria responder a uma pergunta diferente. Interpretar um sublinhado como um separador de palavras (ou espaço em branco geral) é bom, mas não é o que OP estava pedindo ... e pode até quebrar seu caso de uso.
Jonathan Fingland,
1
ucwords () é uma merda. Não funciona com Unicode (particularmente com alfabeto cirílico, grego e outros alfabetos da Europa central). Melhor usar mb_convert_case () no back-end, por exemplo: mb_convert_case ($ _ POST ['name'], MB_CASE_TITLE, 'utf-8');
Aleksey Kuznetsov
15

só queria adicionar uma solução de javascript puro (sem 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
fonte
1
obrigado mano, só quero corrigir uma coisa. esta c < str.length;deve serchr < str.length;
Leysam Rosario
13

Imagino que você possa usar substring () e toUpperCase () para extrair o primeiro caractere, maiúscula e, em seguida, substituir o primeiro caractere de sua string pelo resultado.

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

Eu acho que deve funcionar para você. Outra coisa a considerar é que se esses dados estiverem sendo exibidos, você pode adicionar uma classe ao seu contêiner que tenha a propriedade CSS "text-transform: capitalize".

Fudgie
fonte
não deveria haver como firstChar = firstChar.toUpperCase (); ? Tentei o código em Node.js e tive que fazer isso ou nada mudou!
Adrian Adaine
9

Para fazer isso, você realmente não precisa de Javascript se for usar

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

Por que não fazer isso como css gosta

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

ou faça isso como uma aula e aplique essa aula onde você precisar

.ucwords { text-transform: capitalize; }
Bruce Smith
fonte
4
Bem-vindo ao Stackoverflow. Sua resposta está sugerindo uma alternativa (que pode ser perfeitamente válida em alguns casos de uso), mas não responde realmente à pergunta. Pelo que entendi a pergunta, o autor queria realmente transformar a variável Javascript, e não apenas sua representação visual.
helmbert
3
Sim, mas outras pessoas que fizeram esta pergunta podem estar bem com respostas de javascript OU css, como eu, e isso foi realmente útil ...
Brian Powell
6

Já ouviu falar substr()?

Para começar:

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


[Atualizar:]

Obrigado a @FelixKling pela dica:

$("#test").text(function(i, text) {
    return text.substr(0,1).toUpperCase() + text.substr(1);
});
Cifra
fonte
4
Em vez de chamar text() quatro vezes, passe uma função para text():$("#test").text(function(i, text) { return text.substr(0,1).toUpperCase()+text.substr(1);});
Felix Kling
1
desenterrando corpos antigos aqui, mas se fosse conhecido o conteúdo entra em um elemento, seria muito mais fácil de usar:$('#test').style.textTransform='capitalize';
Rafael Herscovici
Fechar, @Dementic, mas deveria ser: $('#test').css('textTransform', 'capitalize'); BTW, esta é a melhor resposta aqui. Vou apresentá-lo como uma resposta.
vbullinger
@vbullinger - não julgue meu código quando o escrevo bêbado como o diabo :) e eu amo js, ​​não jq, então meu código está errado, mas não muitodocument.getElementById('test').style.textTransform='capitalize';
Rafael Herscovici
5

Com base na resposta de @peter-olson, adotei uma abordagem mais orientada a objetos sem 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"

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

Mmalone
fonte
Esta é realmente a maneira mais adequada, na minha opinião. Eu diria que está toUpperCaseWordsde acordo com os javascript toUpperCase()etoLowerCase()
AB Carroll
5

Maneira mais simples

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

função definida pelo usuário:

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

saída: Hiren Raiyani

Use o código como sua função definida pelo usuário ou direta

Hiren Raiyani
fonte
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
fonte
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
fonte
3

Você pode tentar este código simples com os recursos do ucwords em PHP.

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

Isso manterá as letras maiúsculas inalteradas.

IamMHussain
fonte
3

É tão simples quanto o seguinte:

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

Baseada totalmente na resposta de @Dementric, esta solução está pronta para ser chamada com um método jQuery simples, 'ucwords' ... Obrigado a todos que contribuíram aqui !!!

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

});

EXEMPLO: Isso pode ser chamado usando o método

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

Você pode usar text-transform: capitalize; para este trabalho -

HTML -

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

JQuery -

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

Tente isto

Nota: É apenas a alteração da representação visual da string. Se você alertar esta string, ela sempre mostrará o valor original da string.

Ishan Jain
fonte
0

A string a diminuir antes de colocar a primeira letra em maiúscula.

(Ambos usam sintaxe Jquery)

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

Além disso, uma função para capitalizar a string TODA:

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

Sintaxe a ser usada em um evento de clique em uma caixa de texto:

onClick="CapitaliseFirstLetter('TextId'); return false"
Rubista
fonte
0

Eu usei este código -

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
fonte
0

Html:

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

Javascript com 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
fonte
0

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

Rocha
fonte
0

Aqui está a função unicode-safe ucwords (), que adicionalmente respeita os sobrenomes duplos como Засс-Ранцев russo e alguns nomes nobres como 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();
    });
}
Aleksey Kuznetsov
fonte
0

Maneira mais fácil de maiúscula na primeira letra em JS

var string = "made in india";

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

alert(string );

Resultado: "Fabricado na Índia"

Amo Kumar
fonte
0
var country= $('#country').val();

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

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

não há necessidade de criar qualquer função apenas jugaaar

Shahid
fonte