Colocar letras maiúsculas em sequência


183

Qual é a melhor abordagem para colocar letras maiúsculas em uma string?


66
Se for para exibição, use CSS. text-transform:capitalize;.
Kennytm

3
isso deve ser usado para definir o atributo "title" para elementos DOM. sem CSS :)
vsync

1
Além disso, fiz essa pergunta, embora conheça a solução, apenas porque tentei procurá-la neste site e não consegui encontrar uma solução decente, por isso a adicionei para fins de documentação.
vsync

1
@KennyTM: a transformação de texto não colocaria em maiúscula os valores dos campos do formulário, todos os valores seriam apresentados em maiúsculas, mas enviados ao servidor como estão.
Marco Demaio 4/03/11

8
@Marco: Sim, foi por isso que eu disse "Se for para exibição".
kennytm

Respostas:


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

  • corrige a solução de Marco Demaio onde a primeira letra com um espaço anterior não é maiúscula.
capitalize(' javascript'); // -> ' Javascript'
  • pode lidar com símbolos nacionais e letras acentuadas.
capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'
  • pode lidar com aspas e chaves.
capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]

4
regexp funciona como "Pegue todos os caracteres que não sejam espaços em branco (\ S) que estão no início da string (^) ou após qualquer caractere de espaço em branco (\ s) e
coloque-

3
Um pequeno aprimoramento para lidar com as cadeias de letras maiúsculas :) ** String.prototype.capitalize = function () {retorne this.toLowerCase (). Replace (/ (?: ^ | \ S) \ S / g, função (a) {retornar a.toUpperCase ();}); }; **
SuryaPavan

1
Por favor, não altere os protótipos dos objetos existentes.
Ascherer 02/01

1
@ Dr.X, consulte o complemento 'CHECK THIS OUT'.capitalize(true) -> "Check This Out",. trueParâmetro da mente .
disfated 16/01

1
@ SeaWarrior404, você está certo, atualizou minha resposta com a sintaxe es6, adicionou jsdoc e algum tratamento de pontuação
desatualizado em

216

A implementação mais curta para colocar letras maiúsculas em uma string é a seguinte, usando as funções de seta do ES6:

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

Implementação compatível com ES5:

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

A regex corresponde basicamente à primeira letra de cada palavra dentro da sequência especificada e transforma apenas essa letra em maiúscula:

  • \ b corresponde ao limite de uma palavra (o começo ou o fim da palavra);
  • \ w corresponde ao seguinte meta-caractere [a-zA-Z0-9].

Para caracteres não ASCII, consulte esta solução

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

Essa regex corresponde à primeira letra e a todas as letras que não sejam espaços em branco precedidas por espaços em branco na cadeia especificada e transforma apenas essa letra em maiúscula:

  • \ s corresponde a um caractere de espaço em branco
  • \ S corresponde a um caractere que não é de espaço em branco
  • (x | y) corresponde a qualquer uma das alternativas especificadas

Um grupo de não captura poderia ter sido usado aqui da seguinte maneira, /(?:^|\s)\S/gembora o gsinalizador em nosso regex não capture os subgrupos por design de qualquer maneira.

Felicidades!


1
Você poderia explicar na resposta como o regex funciona? (o significado de cada peça)
vsync

2
Vou selecioná-lo como resposta, se a explicação estiver dentro dele e não como um comentário que alguém poderia perder.
vsync 22/07

2
Isso não parece funcionar para os caracteres nórdicos ä, ö e å. Por exemplo, päijät-hämetornaPäIjäT-HäMe
Markus Meskanen

1
Esta solução não é boa para conteúdo internacional que contém caracteres diacríticos / não latinos. EisbäRené um resultado, por exemplo.
Daniel B.

3
O exemplo de @MarkusMeskanen deve mudar para Päijät-Häme, mas pelo menos no espaço em branco do Chrome não inclui o traço (-), portanto, a segunda parte do nome não é maiúscula. Pode ser corrigido como /(^|\s|-)\S/g.
MiRin 7/10/19

34
function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

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

output: "Esta é a pior string de todos os tempos"

Atualizar:

Parece que esta solução substitui a minha: https://stackoverflow.com/a/7592235/104380


observe que parece que sua função coloca incorretamente em maiúscula também letras acentuadas, veja minha resposta: stackoverflow.com/questions/2332811/capitalize-words-in-string/… Eu também a protoyoyei.
Marco Demaio 15/04

9
Eu não gosto de prototipar, ele tem o potencial de criar colisões, porque alguém está usando o mesmo nome para criar um protótipo de String também.
vsync

15

A resposta fornecida pelo vsync funciona desde que você não tenha letras acentuadas na string de entrada.

Eu não sei o motivo, mas aparentemente as \bcorrespondências in regexp também acentuam as letras (testadas no IE8 e no Chrome), portanto, uma string como "località"seria incorretamente maiúscula convertida em"LocalitÀ" (a àletra fica maiúscula porque o regexp acha que é um limite de palavra)

Uma função mais geral que também funciona com letras acentuadas é esta:

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

Você pode usá-lo assim:

alert( "hello località".toCapitalize() );

1
" javascript".toCapitalize() -> " javascript"
disfated

2
PARA QUEM PODE PREOCUPAR: resposta desatualizada stackoverflow.com/questions/2332811/capitalize-words-in-string/… agora é a melhor resposta aqui.
Marco Demaio 1/10/11

4

Como todos lhe deram a resposta JavaScript solicitada, mostrarei a propriedade CSS text-transform: capitalize fará exatamente isso.

Sei que isso pode não ser o que você está pedindo - você não nos forneceu nenhum contexto em que está executando isso - mas se for apenas para apresentação, eu definitivamente aceitaria a alternativa CSS.


KennyTM venceu você. Verifique o comentário dele na seção de perguntas. :-)
Buhake Sindi

Sim, eu conheço esse atributo CSS, mas preciso disso para o atributo title dos elementos dom, e ele não tem CSS, como você já deve saber.
vsync

4

John Resig (da fama do jQuery) portou um script perl, escrito por John Gruber, para JavaScript. Esse script usa letras maiúsculas de uma maneira mais inteligente, não usa letras minúsculas como 'of' e 'and' por exemplo.

Você pode encontrá-lo aqui: Título em maiúsculas em JavaScript


4

Usando JavaScript e 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>

Basicamente, você pode fazer string.capitalize() e ele irá capitalizar cada primeira letra de cada palavra.

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


1
Eu não sou fã de protótipos dessa maneira, porque meus scripts às vezes são incorporados por terceiros em outros sites, e isso pode causar problemas ao mexer com objetos globais como "String" ... então, prefiro "funtion".
vsync

1
Essa é a beleza do protótipo (não o protótipo que você baixa). É padrão em javascript e funciona em todos os navegadores.
Buhake Sindi

Eu suspeito que isso pode causar problemas se alguém já prototipar sua própria String.prototype.capitalize, e eu a substituirei acidentalmente.
vsync

1
@ vsync, você sempre pode verificar fazendo isso. if (object.capitalize) {...} else {String.prototype.capitalize = function()....}onde objeto é do tipo String. Então, é bem simples mesmo.
Buhake Sindi

4

A resposta de Ivo é boa, mas prefiro não corresponder \wporque não há necessidade de capitalizar 0-9 e AZ. Podemos ignorá-los e corresponder apenas a az.

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

É a mesma saída, mas acho mais claro em termos de código de auto-documentação.


Isto irá falhar por carta não Inglês: "Är Toaletten". Sua resposta, anos após o fornecimento de uma resposta muito boa, não contribui para a discussão.
vsync

@vsync que parece bastante duro. é uma otimização para a resposta aceita. /\b\w/gtambém falha em letras que não estão em inglês. Nem todo mundo lida com caracteres unicode, e isso ajudará aqueles que querem não.
Big Money

1
Tudo bem ... acho que você não deve usar isso em vez da resposta principal apenas porque não precisa de nenhum outro idioma além do inglês. Essa não é uma justificativa suficientemente boa, já que não há penalidade para fazê-lo para todos os caracteres ASCII, como dito na pergunta principal
vsync 25/02/19

3

Se você estiver usando lodash em seu aplicativo JavaScript, poderá usar _.capitalize :

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


3

Uma maneira concisa do ES6 de fazer isso pode ser algo assim.

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

Isso apenas maiúscula a primeira letra e não afeta o restante da caixa da frase.


2

Minha solução:

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(' ');
};

Exemplo:

'álL riGht'.toCapital();
// Returns 'Áll Right'

Tente vários métodos e sua solução é o mais eficiente e respeita os acentos do nome jsbench.me/urjeu9wvql
nasatome

Isso não funciona: 'a áAA. bb . bbb .cc .d'.toCapital();=>a Áaa. bb . Bbb .cc .d
vsync

Decidi não considerar palavras com menos de duas letras, como "of", "as".
Erick Tatsui 21/04

1

Isso deve cobrir os casos de uso mais básicos.

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

Editar: Legibilidade aprimorada do mapeamento.


Você pode explicar por que você acha que sua resposta é melhor do que outras de muitos anos atrás?
vsync

Você pode explicar por que você pensou que eu quis dizer que minha resposta é a melhor / ou melhor que as outras? Eu não mencionei isso, é apenas diferente. Também não vi você deixar esse comentário em outras postagens, então realmente não entendi. Mas para iniciantes: ele usa os recursos js modernos (desestruturação, seta gorda, retorno implícito), não usa regx e é uma abordagem mais funcional para o problema. Além disso, ele possui um tratamento de erros muito básico e retorna uma string vazia se você a passar (uma para mim foi importante).
Gotas

é aprovado ser diferente, mas tem de ser melhor ou igual ao de outras respostas, e que parece ser ... ilegível e certamente nada que iria colocar no código de produção, porque ninguém seria capaz de compreendê-lo
vsync

Ahhh ok, então 50% das soluções aqui são quais monkeypatch String você realmente colocará em produção? Ou talvez expressões regex complicadas? É muito mais fácil argumentar com isso, certo? Imho absolutamente não! Também dizer que ninguém vai entender isso é uma afirmação bastante subjetiva. Também para isso, você disse que é um trecho de código fragmentado (mais recursos, mas esse não é o caso aqui). Como isso é desfiado e minha solução ninguém vai entender? Não há como desembaraçar essas expressões regulares sem perder horas.
Gotas

Esse código foi escrito pelo próprio Sr. Resig e não deve ser questionado. Você, por outro lado, não tem credibilidade devido ao seu anonimato. Independentemente disso, uma solução Regex é mais curta, roda muito mais rápido e também é lida com facilidade por qualquer pessoa aprendida no básico do Regex. Não há muito o que "desembaraçar" nisso: /\b\w/g...
vsync

1

Esta solução não utiliza regex, suporta caracteres acentuados e também é suportada por quase todos os navegadores.

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

Uso:

console.log (capitalizeIt ('segundo programa Javascript dentro'));

Resultado:

2º Programa Javascript Interno


1
Dessa maneira, consome muitos recursos da CPU. JavaScript não altera valores primitivos, o que implica na criação de um novo cada vez que uma operação é executada. É melhor usar funções nativas como "substituir", exemplo gratia.
Daniel Bandeira

0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html é uma das muitas respostas disponíveis.

O Google pode ser tudo o que você precisa para esses problemas.

Uma abordagem ingênua seria dividir a string por espaços em branco, colocar em maiúscula a primeira letra de cada elemento da matriz resultante e juntá-la novamente. Isso deixa a capitalização existente em paz (por exemplo, o HTML permanece HTML e não se torna algo bobo como o Html). Se você não quer esse efeito, transforme a corda inteira em minúscula antes de dividi-la.


0

Esse código coloca em maiúscula as palavras após o ponto:

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

0

Eu gosto de ir com processo fácil. Primeiro, altere a string para Array para facilitar a iteração; depois, usando a função map, altere cada palavra como você deseja.

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

0

Jquery ou Javascipt não fornece um método interno para conseguir isso.

A transformação de teste CSS (transformação de texto: capitalizar;) realmente não capitaliza os dados da sequência, mas mostra uma renderização capitalizada na tela.

Se você está procurando uma maneira mais legítima de conseguir isso no nível de dados usando o vanillaJS comum, use esta solução =>

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

0

Usa isto:

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>


0

Você pode usar o seguinte para colocar em maiúscula as palavras em uma sequência:

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;

}

0

Também há locutus: https://locutus.io/php/strings/ucwords/, que define desta maneira:

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

0

Eu usaria regex para este fim:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.