Converter string em maiúsculas e minúsculas com JavaScript

Existe uma maneira simples de converter uma string em maiúsculas e minúsculas? Por exemplo, john smithtorna-se John Smith. Não estou procurando algo complicado como a solução de John Resig , apenas (espero) algum tipo de uma ou duas linhas.

Tente o seguinte:

    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>

Uma maneira um pouco mais elegante, adaptando a função de Greg Dean:

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

Chame assim:

"pascal".toProperCase();

Tente aplicar o estilo CSS de transformação de texto aos seus controles.

por exemplo: (text-transform: capitalize);

Use apenas uma abordagem JS quando for absolutamente necessário.

Aqui está minha versão, IMO também é fácil de entender e elegante.

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

Aqui está minha função que converte para maiúsculas, mas também preserva acrônimos definidos como maiúsculas e palavras menores como minúsculas:

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

Por exemplo:

"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:"

Eu prefiro o seguinte sobre as outras respostas. Corresponde apenas à primeira letra de cada palavra e a coloca em maiúscula. Código mais simples, mais fácil de ler e menos bytes. Ele preserva as letras maiúsculas existentes para evitar acrônimos distorcidos. No entanto, você sempre pode chamar toLowerCase()sua string primeiro.

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

Você pode adicionar isso ao seu protótipo de string, o que permitirá o 'my string'.toTitle()seguinte:

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

Exemplo:

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

Sem usar regex apenas para referência:

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

Você poderia imediatamente toLowerCasea string e, em seguida, apenas toUpperCasea primeira letra de cada palavra. Torna-se um liner 1 muito simples:

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

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

No caso de você estar preocupado com essas palavras de preenchimento, você sempre pode dizer à função o que não deve capitalizar.

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

Espero que isso ajude você.

editar

Se você deseja manipular as principais palavras de cola, acompanhe essa variável com mais uma:

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

Se o regex usado nas soluções acima estiver deixando você confuso, tente este código:

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

Eu criei essa função que pode lidar com sobrenomes (por isso não é maiúscula), como "McDonald" ou "MacDonald" ou "O'Toole" ou "D'Orazio". No entanto, ele não lida com nomes alemães ou holandeses com "van" ou "von", que geralmente estão em minúsculas ... Eu acredito que "de" também é minúsculo, como "Robert de Niro". Estes ainda teriam que ser abordados.

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

Parece funcionar ... Testado com o exposto acima, "a raposa marrom-rápida? / Pula / ^ sobre ^ o cão preguiçoso!" E "C: / arquivos de programas / algum fornecedor / sua segunda aplicação / a file1.txt ".

Se você deseja 2º em vez de 2º, pode mudar para /([a-z])(\w*)/g .

A primeira forma pode ser simplificada como:

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

Tente isto

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

Exemplo

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

Se você pode usar bibliotecas de terceiros em seu código, o lodash possui uma função auxiliar para nós.

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'

Tente da maneira mais curta:

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

outro

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

A maioria dessas respostas parece ignorar a possibilidade de usar a palavra metacaractere de limite (\ b). Uma versão mais curta da resposta de Greg Dean, utilizando-a:

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

Também funciona para nomes hifenizados como Jim-Bob.

Eu acho que o mais simples é usar css.

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

Use /\S+/gpara suportar diacríticos:

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

No entanto: " s unshine ( y ellow)" ⇒ " S unshine ( y ellow)"

Queria adicionar minha própria resposta, pois precisava de uma toTitleCasefunção robusta que levasse em conta as regras gramaticais listadas aqui (artigo recomendado pelo Google). Existem várias regras que dependem do comprimento da sequência de entrada. Abaixo está a função + testes de unidade.

A função também consolida o espaço em branco e remove caracteres especiais (modifique a expressão regular para suas necessidades)

Função 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(' ');
}

Testes de unidade para garantir a correção

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

Observe que estou removendo um pouco de caracteres especiais das strings fornecidas. Você precisará ajustar a regex para atender aos requisitos do seu projeto.

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

Tomando a solução "lewax00", criei esta solução simples que força "w" começando com espaço ou "w" que inicia o word, mas não é capaz de remover os espaços intermediários extras.

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

O resultado é "Sofía Vergara".

Aqui está minha função que cuida de caracteres acentuados (importantes para o francês!) E que pode ativar / desativar o tratamento de exceções menores. Espero que ajude.

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

Temos discutido aqui no escritório e achamos que tentar corrigir automaticamente a maneira como as pessoas inserem nomes da maneira atual que você quer que seja está repleto de possíveis problemas.

Chegamos a vários casos em que diferentes tipos de capitalização automática se desintegram e estes são apenas para nomes em inglês, cada idioma tem suas próprias complexidades.

Problemas ao colocar em maiúscula a primeira letra de cada nome:

• Acrônimos como IBM não podem ser inseridos, se tornariam Ibm.

• O nome McDonald se transformaria em Mcdonald, o que está incorreto, a mesma coisa também é MacDonald.

• Nomes de cano duplo, como Marie-Tonks, seriam transformados em Marie-Tonks.

• Nomes como O'Connor se tornariam O'connor.

Para a maioria deles, você pode escrever regras personalizadas para lidar com isso, no entanto, isso ainda tem problemas com acrônimos como antes e você recebe um novo problema:

• A adição de uma regra para corrigir nomes no Mac, como MacDonald, quebraria nomes como Macy, transformando-o em MacY.

A única solução que encontramos que nunca é incorreta é colocar em maiúscula todas as letras que são um método de força bruta que o DBS parece também usar.

Portanto, se você deseja automatizar o processo, é tão impossível quanto fazer sem um dicionário de cada nome e palavra e como deve ser capitulado. Se você não tem uma regra que cubra tudo, não o use como apenas irritará seus usuários e solicitará que as pessoas que desejam inserir seus nomes corretamente possam ir para outro lugar.

aqui está outra solução usando css (e javascript, se o texto que você deseja transformar estiver em maiúsculas):

html

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

js

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

css

#text{text-transform:capitalize;}

Para aqueles de nós que têm medo de expressões regulares (risos):

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

Minha solução de uma linha:

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

Em seguida, você pode chamar o método capitalizeWords()em qualquer sequência. Por exemplo:

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

>>> This Actually Works

Minha outra solução:

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

Em seguida, você pode chamar o método capitalizeWords()em qualquer sequência. Por exemplo:

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

>>> This One Works Too

Solução alternativa baseada na resposta de Greg Dean:

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

Em seguida, você pode chamar o método capitalizeWords()em qualquer sequência. Por exemplo:

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

>>> Yes And No

Surpreso ao ver que ninguém mencionou o uso do parâmetro rest. Aqui está um liner simples que usa os parâmetros Rest ES6.

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

Isso se baseia na minha solução para o Bonfire "Title Case" do FreeCodeCamp , que exige que você primeiro converta a sequência especificada para todas as letras minúsculas e, em seguida, converta todos os caracteres que procedem de um espaço para letras maiúsculas.

Sem usar regex:

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