Convertir une chaîne de caractères en cas de titre avec JavaScript

Est-il un moyen simple de convertir une chaîne en majuscules? Par exemple: john smith devient John Smith . Je ne cherche pas quelque chose de compliqué comme la solution de John Resig , juste (avec un peu de chance) une sorte de une - ou deux-doublure.

439
demandé sur Michael 2008-10-13 12:05:02

30 réponses

essayez ceci:

    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>
635
répondu Greg Dean 2018-10-04 23:31:10

d'une manière un peu plus élégante, en adaptant la fonction de Greg Dean:

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

appelez ça comme:

"pascal".toProperCase();
178
répondu Tuan 2011-04-07 00:14:49

essayez d'appliquer le style CSS text-transform à vos commandes.

par exemple: (text-transform: capitalize);

n'utilisez une approche JS qu'en cas d'absolue nécessité.

127
répondu Talha Ashfaque 2015-12-21 07:38:58

voici ma fonction qui convertit au cas de titre mais préserve également des acronymes définis en majuscules et des mots mineurs en minuscules:

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

par exemple:

"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:"
87
répondu Geoffrey Booth 2015-04-12 03:35:54

voici ma version, IMO il est facile à comprendre et élégant aussi.

var str = "foo bar baz"

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

// returns "Foo Bar Baz"
84
répondu a8m 2017-04-20 17:51:51

je préfère ce qui suit aux autres réponses. Elle correspond à la première lettre de chaque mot et capitalise. Code plus simple, plus facile à lire et moins d'octets. Il préserve les majuscules existantes pour éviter de déformer les acronymes. Cependant, vous pouvez toujours appeler toLowerCase() sur votre chaîne.

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

vous pouvez ajouter ceci à votre prototype de chaîne qui vous permettra de 'my string'.toTitle() comme suit:

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}
24
répondu Tom Kay 2018-09-26 15:01:27

si regex utilisé dans les solutions ci-dessus vous confond, essayez ce code:

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}
16
répondu immazharkhan 2016-02-28 10:16:42

sans utiliser regex juste pour référence:

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

'john smith'.toProperCase();
14
répondu Mike 2011-12-19 16:25:25

juste au cas où vous êtes inquiet au sujet de ces mots de remplissage, vous pouvez toujours juste dire à la fonction ce qu'il ne faut pas capitaliser.

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

J'espère que ça vous aidera.

14
répondu fncomp 2012-06-26 00:16:47

cela ne fonctionne que pour une chaîne de mots mais c'est ce dont j'avais besoin:

'string'.replace(/^[a-z]/, function (x) {return x.toUpperCase()}) // String

JSFiddle: https://jsfiddle.net/simo/gou2uhLm /

14
répondu simo 2016-05-18 12:27:09

j'ai fait cette fonction qui peut traiter les noms de famille (donc ce n'est pas le cas du titre) tels que" McDonald "ou" MacDonald "ou" O'Toole "ou"D'Orazio". Il ne traite cependant pas les noms allemands ou néerlandais avec "van" ou "von" qui sont souvent en minuscules... Je crois que" de "est souvent aussi minuscule que"Robert De Niro". Ces encore être traitées.

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function(, , , , ) { if(){return .toUpperCase()++.toUpperCase();} return .toUpperCase(); });
}
9
répondu Lwangaman 2010-02-03 22:22:57

vous pouvez immédiatement toLowerCase la chaîne, puis juste toUpperCase la première lettre de chaque mot. Devient un 1 liner très simple:

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

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));
9
répondu KevBot 2016-10-18 15:09:38

Essayez cette

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

exemple

var str = 'john smith';
str.toProperCase();
8
répondu Maxi Baez 2014-05-26 20:03:07

ES 6

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

else

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')
8
répondu jssridhar 2018-08-03 04:40:28
var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

Semble fonctionner... Testé avec le ci-dessus, "le rapide-brun, le renard? /sauts/ ^sur^ l' ¡paresseux! chien..."et "C:/program fichiers/vendor/leur 2ème application/un fichier1.txt".

si vous voulez 2ème au lieu de 2ème, vous pouvez changer à /([a-z])(\w*)/g .

le premier formulaire peut être simplifié comme suit:

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}
7
répondu PhiLho 2008-10-13 08:27:11

la plupart de ces réponses semblent ignorer la possibilité d'utiliser le mot limite metacharacter (\b). Une version plus courte de la réponse de Greg Dean l'utilisant:

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

fonctionne pour les noms avec un trait d'Union comme Jim-Bob aussi.

6
répondu lewax00 2014-07-16 14:59:34

Essayez ceci, le plus court chemin:

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());
6
répondu Vikram 2017-10-12 12:35:42

utiliser /\S+/g pour supporter les diacritiques:

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

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

5
répondu le_m 2016-06-20 20:41:23

Si vous pouvez utiliser des bibliothèques tierces dans votre code puis lodash a une fonction d'aide pour nous.

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'
5
répondu waqas 2016-12-29 11:27:16

je pense que le plus simple est d'utiliser css.

function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}
5
répondu wondie 2018-08-04 16:53:36

en prenant la solution " lewax00 "j'ai créé cette solution simple qui force à" w "en commençant par l'espace ou" w " qui initient de mot, mais n'est pas en mesure d'enlever les espaces intermédiaires supplémentaires.

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

le résultat est"Sofía Vergara".

4
répondu Asereware 2014-09-30 18:52:16

voici ma fonction qui prend soin des caractères accentués (important pour le français !) et qui peut activer / désactiver la gestion des exceptions lowers. Espérons que cela aide.

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;
}
4
répondu Ouatataz 2016-12-11 16:36:57

pour ceux d'entre nous qui ont peur des expressions régulières (lol):

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(" ");
}
4
répondu lashja 2017-06-06 10:19:50

je voulais ajouter ma propre réponse car j'avais besoin d'une fonction robuste toTitleCase qui prend en compte les règles de grammaire listée ici (article recommandé par Google). Il existe différentes règles qui dépendent de la longueur de la chaîne d'entrée. Vous trouverez ci-dessous les tests fonction + unité.

la fonction consolide également whitespace et supprime les caractères spéciaux (modifier regex pour vos besoins)

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

Essais unitaires pour assurer l'exactitude

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

s'il vous plaît noter que je suis en train de supprimer un peu de caractères spéciaux des chaînes fournies. Vous aurez besoin de modifier la regex pour répondre aux exigences de votre projet.

3
répondu dipole_moment 2017-10-17 19:30:20

ce n'est pas court, mais voici ce que j'ai trouvé lors d'une récente affectation à l'école:

var myPoem = 'What is a jQuery but a misunderstood object?'
//What is a jQuery but a misunderstood object? --> What Is A JQuery But A Misunderstood Object?

  //code here
var capitalize = function(str) {
  var strArr = str.split(' ');
  var newArr = [];
  for (var i = 0; i < strArr.length; i++) {
    newArr.push(strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1))
  };
  return newArr.join(' ')  
}

var fixedPoem = capitalize(myPoem);
alert(fixedPoem);
2
répondu Spencer Shattuck 2015-04-21 00:28:22

Prototype de la solution de Greg Doyen de la solution:

String.prototype.capitalize = function() {
  return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
2
répondu dipole_moment 2015-08-06 20:19:40

version plus simple et performante, avec mise en cache simple.

  var TITLE_CASE_LOWER_MAP = {
    'a': 1, 'an': 1, 'and': 1, 'as': 1, 'at': 1, 'but': 1, 'by': 1, 'en':1, 'with': 1,
    'for': 1, 'if': 1, 'in': 1, 'of': 1, 'on': 1, 'the': 1, 'to': 1, 'via': 1
  };

  // LEAK/CACHE TODO: evaluate using LRU.
  var TITLE_CASE_CACHE = new Object();

  toTitleCase: function (title) {
    if (!title) return null;

    var result = TITLE_CASE_CACHE[title];
    if (result) {
      return result;
    }

    result = "";
    var split = title.toLowerCase().split(" ");
    for (var i=0; i < split.length; i++) {

      if (i > 0) {
        result += " ";
      }

      var word = split[i];
      if (i == 0 || TITLE_CASE_LOWER_MAP[word] != 1) {
        word = word.substr(0,1).toUpperCase() + word.substr(1);
      }

      result += word;
    }

    TITLE_CASE_CACHE[title] = result;

    return result;
  },
2
répondu Rafael Sanches 2015-09-09 17:12:16

ceci est basé sur ma solution pour Bonfire de FreeCodeCamp" "cas titre" , qui exige que vous convertissiez d'abord la chaîne donnée à tous les cas inférieurs et puis convertir chaque caractère en faisant un espace en cas supérieur.

sans utiliser regex:

function titleCase(str) {
 return str.toLowerCase().split(' ').map(function(val) { return val.replace(val[0], val[0].toUpperCase()); }).join(' ');
}
2
répondu Jamesy Dimmick May 2015-11-19 22:29:38

ma version simple et facile au problème:

    function titlecase(str){
    var arr=[];  
    var str1=str.split(' ');
    for (var i = 0; i < str1.length; i++) {
    var upper= str1[i].charAt(0).toUpperCase()+ str1[i].substr(1);
    arr.push(upper);
     };
      return arr.join(' ');
    }
    titlecase('my name is suryatapa roy');
2
répondu Suryatapa 2016-05-02 20:38:11

nous avons eu une discussion ici au bureau et nous pensons que d'essayer de corriger automatiquement la façon dont les gens entrent des noms de la façon actuelle que vous voulez qu'il fasse est chargé avec des problèmes possibles.

nous avons trouvé plusieurs cas où différents types de majuscules automatiques tombent en morceaux et ceux-ci sont juste pour les noms anglais seulement, chaque langue a ses propres complexités.

des Problèmes avec Majuscule de la première lettre de chaque nom:

"151900920 • * Acronymes tels que IBM ne sont pas autorisés à être entrés, se transformerait en Ibm.

• Le Nom de Mcdonald's serait à son tour tenu Mcdonald qui est incorrect, la même chose est MacDonald trop.

• les noms à double barre tels que Marie-Tonks seraient transformés en Marie-tonks.

• des noms comme O'Connor se transformeraient en O'Connor.

pour la plupart d'entre eux, vous pouvez écrire des règles personnalisées pour y faire face, mais cela a encore des problèmes avec les acronymes comme avant et vous obtenez un nouveau problème:

• ajout D'une règle pour fixer les noms avec Mac tel que MacDonald, est-ce que le bris des noms tels que Macy le transformerait en MacY.

la seule solution que nous avons trouvée qui n'est jamais incorrecte est de capitaliser chaque lettre qui est une méthode de force brute que le DBS apparaissent permet également de l'utiliser.

donc si vous voulez automatiser le processus, il est aussi bon que impossible de le faire sans un dictionnaire de chaque nom et mot et comment il devrait être capitalisé, si vous n'avez pas une règle qui couvre tout ne l'utilisez pas car il va juste ennuyer vos utilisateurs et invite les gens qui veulent entrer leurs noms correctement pour aller ailleurs.

2
répondu jjr2000 2017-07-18 13:13:45