Convertir la chaîne en casse de titre avec JavaScript

Existe-t-il un moyen simple de convertir une chaîne en casse de titre? Par exemple, john smithdevient John Smith. Je ne cherche pas quelque chose de compliqué comme la solution de John Resig , juste (espérons-le) une sorte de doublure à une ou deux lignes.

Essaye ça:

    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>

Une manière un peu plus élégante, 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();

Essayez d'appliquer le style CSS de transformation de texte à vos contrôles.

par exemple: (text-transform: capitalize);

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

Voici ma version, IMO c'est facile à comprendre et élégant aussi.

var str = "foo bar baz"

console.log(

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

)
// returns "Foo Bar Baz"

Voici ma fonction qui se convertit en casse de titre mais conserve également les acronymes définis en majuscules et les 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:"

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

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

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

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

Exemple:

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

Sans utiliser l'expression régulière 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(' ');
};

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

Vous pouvez immédiatement toLowerCasela chaîne, puis juste toUpperCasela première lettre de chaque mot. Devient une doublure 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'));

Juste au cas où vous seriez inquiet à propos de ces mots de remplissage, vous pouvez toujours simplement dire à la fonction ce qu'il ne faut pas mettre en majuscule.

/**
 * @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 cela vous aidera.

Éditer

Si vous souhaitez gérer les principaux mots de la colle, vous pouvez garder une trace de cette w / une variable de plus:

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

Si l'expression régulière utilisée dans les solutions ci-dessus vous rend confus, essayez ce code:

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

J'ai fait cette fonction qui peut gérer les noms de famille (donc ce n'est pas la casse du titre) comme "McDonald" ou "MacDonald" ou "O'Toole" ou "D'Orazio". Il ne gère cependant pas les noms allemands ou néerlandais avec "van" ou "von" qui sont souvent en minuscules ... Je pense que "de" est souvent aussi en minuscules comme "Robert de Niro". Il faudrait encore y remédier.

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

Semble fonctionner ... Testé avec ce qui précède, "le brun rapide, le renard? / Saute / ^ sur ^ le chien paresseux! ..." et "C: / fichiers de programme / certains fournisseurs / leur 2ème application / a file1.txt ".

Si vous voulez 2Nd au lieu de 2nd, vous pouvez passer à /([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();
  });
}

Essaye ça

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

Exemple

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

Si vous pouvez utiliser des bibliothèques tierces dans votre code, lodash a une fonction d'assistance 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'

Essayez ceci, le plus court:

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

autre

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

La plupart de ces réponses semblent ignorer la possibilité d'utiliser le métacaractère de limite de mot (\ 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 également pour les noms avec trait d'union comme Jim-Bob.

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

Utilisez /\S+/gpour soutenir les signes 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

Cependant: " s Unshine ( y ellow)" ⇒ " S Unshine ( y ellow)"

Je voulais ajouter ma propre réponse car j'avais besoin d'une toTitleCasefonction robuste qui prend en compte les règles de grammaire énumérées ici (article recommandé par Google). Il existe différentes règles qui dépendent de la longueur de la chaîne d'entrée. Voici la fonction + tests unitaires.

La fonction consolide également les espaces et supprime les caractères spéciaux (modifiez l'expression régulière selon 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(' ');
}

Tests unitaires pour garantir 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');
  });
});

Veuillez noter que je retire pas mal de caractères spéciaux des chaînes fournies. Vous devrez modifier le regex pour répondre aux exigences de votre projet.

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

En prenant la solution "lewax00", j'ai créé cette solution simple qui force à "w" en commençant par l'espace ou "w" qui initie le mot, mais n'est pas en mesure de supprimer 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".

Voici ma fonction qui s'occupe des caractères accentués (important pour le français!) Et qui peut activer / désactiver la gestion des exceptions basses. J'espère que cela pourra aider.

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

Nous avons eu une discussion ici au bureau et nous pensons qu'essayer de corriger automatiquement la façon dont les gens saisissent les noms de la manière actuelle que vous voulez qu'il fasse est semé d'embûches.

Nous avons trouvé plusieurs cas où différents types de capitalisation automatique se désagrègent et ce sont uniquement pour les noms anglais, chaque langue a ses propres complexités.

Problèmes de mise en majuscule de la première lettre de chaque nom:

• Les acronymes tels qu'IBM ne peuvent pas être saisis, se transformeraient en Ibm.

• Le nom McDonald se transformerait en Mcdonald, ce qui est incorrect, la même chose est MacDonald aussi.

• Les noms à double canon tels que Marie-Tonks deviendraient 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, cependant, cela a toujours des problèmes avec Acronymes comme avant et vous obtenez un nouveau problème:

• L'ajout d'une règle pour fixer les noms avec Mac comme MacDonald, ferait que les noms de rupture comme Macy le transforment en MacY.

La seule solution que nous avons trouvée qui n'est jamais incorrecte est de mettre en majuscule chaque lettre qui est une méthode de force brute que le DBS semble également utiliser.

Donc, si vous voulez automatiser le processus, il est presque impossible de se passer d'un dictionnaire de chaque nom et mot et de la façon dont il devrait être capitalisé.Si vous n'avez pas de règle qui couvre tout, ne l'utilisez pas comme il ne fera qu'ennuyer vos utilisateurs et inciter les personnes qui souhaitent saisir correctement leur nom à aller ailleurs.

voici une autre solution utilisant css (et javascript, si le texte que vous souhaitez transformer est en majuscule):

html

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

js

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

css

#text{text-transform:capitalize;}

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

Ma solution monoligne:

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

Ensuite, vous pouvez appeler la méthode capitalizeWords()sur n'importe quelle chaîne. Par exemple:

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

>>> This Actually Works

Mon autre solution:

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

Ensuite, vous pouvez appeler la méthode capitalizeWords()sur n'importe quelle chaîne. Par exemple:

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

>>> This One Works Too

Solution alternative basée sur la réponse 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);
};

Ensuite, vous pouvez appeler la méthode capitalizeWords()sur n'importe quelle chaîne. Par exemple:

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

>>> Yes And No

Surpris de voir que personne n'a mentionné l'utilisation du paramètre de repos. Voici un simple liner qui utilise les paramètres ES6 Rest.

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

Ceci est basé sur ma solution pour Bonfire "Title Case" de FreeCodeCamp , qui vous oblige à convertir d'abord la chaîne donnée en minuscules et ensuite convertir chaque caractère procédant d'un espace en majuscules.

Sans utiliser l'expression régulière:

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