Mettre les mots en majuscules dans la chaîne

183

Quelle est la meilleure approche pour mettre des mots en majuscules dans une chaîne?

vsync
la source
66
Si c'est pour l'affichage, utilisez CSS. text-transform:capitalize;.
kennytm
3
ceci doit être utilisé pour définir l'attribut "title" sur les éléments DOM. no CSS :)
vsync
1
De plus, j'ai posé cette question, bien que je connaisse la solution, simplement parce que j'ai essayé de la rechercher sur ce site Web et que je n'ai pas pu trouver de solution décente, alors je l'ai ajoutée pour des raisons de documentation.
vsync
1
@KennyTM: text-transform ne mettrait pas vraiment en majuscule les valeurs fieds du formulaire, toutes les valeurs seraient présentées en majuscules, mais envoyées au serveur telles quelles.
Marco Demaio
8
@Marco: Oui, c'est pourquoi j'ai dit "Si c'est pour l'affichage".
kennytm

Réponses:

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 la solution de Marco Demaio où la première lettre précédée d'un espace n'est pas en majuscule.
capitalize(' javascript'); // -> ' Javascript'
  • peut gérer les symboles nationaux et les lettres accentuées.
capitalize('бабушка курит трубку');  // -> 'Бабушка Курит Трубку'
capitalize('località àtilacol')      // -> 'Località Àtilacol'
  • peut gérer les guillemets et les accolades.
capitalize(`"quotes" 'and' (braces) {braces} [braces]`);  // -> "Quotes" 'And' (Braces) {Braces} [Braces]
défait
la source
4
l'expression rationnelle fonctionne comme "Prendre tous les caractères non blancs (\ S) se tenant juste au début de la chaîne (^) ou après tout caractère d'
espacement
3
Une petite amélioration pour gérer les chaînes majuscules :) ** String.prototype.capitalize = function () {return this.toLowerCase (). Replace (/ (?: ^ | \ S) \ S / g, function (a) {return a.toUpperCase ();}); }; **
SuryaPavan
1
Veuillez ne pas modifier les prototypes des objets existants.
Ascherer
1
@ Dr.X, voir add-on, 'CHECK THIS OUT'.capitalize(true) -> "Check This Out". trueParamètre de l' esprit .
défait le
1
@ SeaWarrior404, vous avez raison, a mis à jour ma réponse avec la syntaxe es6, ajouté jsdoc et un traitement de ponctuation
défait le
216

L'implémentation la plus courte pour la mise en majuscule des mots dans une chaîne est la suivante à l'aide des fonctions fléchées d'ES6:

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

Implémentation compatible ES5:

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

L'expression régulière correspond essentiellement à la première lettre de chaque mot dans la chaîne donnée et ne transforme que cette lettre en majuscule:

  • \ b correspond à une limite de mot (le début ou la fin du mot);
  • \ w correspond au méta-caractère suivant [a-zA-Z0-9].

Pour les caractères non ASCII, reportez-vous à cette solution à la place

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

Cette expression régulière correspond à la première lettre et à toutes les lettres non blanches précédées d'un espace blanc dans la chaîne donnée et transforme uniquement cette lettre en majuscule:

  • \ s correspond à un caractère d'espacement
  • \ S correspond à un caractère non blanc
  • (x | y) correspond à l'une des alternatives spécifiées

Un groupe non capturant aurait pu être utilisé ici comme suit, /(?:^|\s)\S/gbien que le gdrapeau dans notre regex ne capture de toute façon pas les sous-groupes par conception.

À votre santé!

Ivo
la source
1
Pourriez-vous expliquer dans la réponse comment fonctionne l'expression régulière? (la signification de chaque morceau)
vsync
2
Je la sélectionnerai comme réponse si l'explication se trouve à l'intérieur et non comme un commentaire à manquer.
vsync
2
Cela ne semble pas fonctionner pour les personnages nordiques ä, ö et å. Par exemple päijät-hämedevientPäIjäT-HäMe
Markus Meskanen
1
Cette solution n'est pas adaptée aux contenus internationaux contenant des caractères diacritiques / non latins. EisbäRenest un résultat, par exemple.
Daniel B.
3
L'exemple de @MarkusMeskanen devrait devenir Päijät-Häme, mais au moins dans Chrome, l'espace blanc n'inclut pas le tiret (-), donc la deuxième partie du nom n'est pas en majuscule. Peut être fixé comme /(^|\s|-)\S/g.
MiRin
34
function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

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

sortie: "C'est la pire chaîne de tous les temps"

Mettre à jour:

Il semble que cette solution remplace la mienne: https://stackoverflow.com/a/7592235/104380

vsync
la source
faites attention qu'il semble que votre fonction capitalise à tort aussi les lettres accentuées, voir ma réponse: stackoverflow.com/questions/2332811/capitalize-words-in-string/ ... Je l'ai également protoypé.
Marco Demaio
9
Je n'aime pas le prototypage, il a le potentiel de créer des collisions si quelqu'un d'autre utilise également le même nom pour prototyper String.
vsync
15

La réponse fournie par vsync fonctionne tant que vous n'avez pas de lettres accentuées dans la chaîne d'entrée.

Je ne connais pas la raison, mais apparemment, l' \bexpression rationnelle in correspond également aux lettres accentuées (testé sur IE8 et Chrome), donc une chaîne comme celle- "località"ci serait mal convertie en majuscule"LocalitÀ" (la àlettre est en majuscule car l'expression rationnelle pense que c'est une limite de mot)

Une fonction plus générale qui fonctionne également avec les lettres accentuées est celle-ci:

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

Vous pouvez l'utiliser comme ceci:

alert( "hello località".toCapitalize() );
Marco Demaio
la source
1
" javascript".toCapitalize() -> " javascript"
défait le
2
À QUI IL PEUT S'INQUIÉTER: la réponse défaite stackoverflow.com/questions/2332811/capitalize-words-in-string/… est maintenant la meilleure réponse ici.
Marco Demaio
4

Puisque tout le monde vous a donné la réponse JavaScript que vous avez demandée, je vais ajouter que la propriété CSS text-transform: capitalizefera exactement cela.

Je me rends compte que ce n'est peut- être pas ce que vous demandez - vous ne nous avez pas donné le contexte dans lequel vous exécutez cela - mais si c'est juste pour la présentation, j'irais certainement avec l'alternative CSS.

David Hedlund
la source
KennyTM vous a battu. Consultez son commentaire sur la section des questions. :-)
Buhake Sindi
Oui, je connais cet attribut CSS, mais j'en ai besoin pour l'attribut title aux éléments dom, et il n'a pas de CSS quoi que ce soit, comme vous le savez peut-être.
vsync
4

John Resig (de renommée jQuery) a porté un script perl, écrit par John Gruber, sur JavaScript. Ce script capitalise de manière plus intelligente, il ne capitalise pas les petits mots comme «de» et «et» par exemple.

Vous pouvez le trouver ici: Capitalisation du titre en JavaScript

meouw
la source
4

Utiliser JavaScript et 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>

En gros, vous pouvez le faire string.capitalize()et il mettra en majuscule chaque 1ère lettre de chaque mot.

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

Buhake Sindi
la source
1
Je ne suis pas fan du prototypage de cette façon, car mes scripts sont parfois intégrés à des tiers dans d'autres sites Web, et cela peut causer des problèmes avec des objets globaux comme "String" ... donc je préfère le "fucntion" à la place.
vsync
1
C'est la beauté du prototype (pas le prototype que vous téléchargez). Il est standard en javascript et fonctionne dans tous les navigateurs.
Buhake Sindi
Je soupçonne que cela peut causer des problèmes si quelqu'un d'autre a déjà prototypé son propre String.prototype.capitalize, et je le remplacerai accidentellement.
vsync
1
@vsync, vous pouvez toujours vérifier en faisant cela. if (object.capitalize) {...} else {String.prototype.capitalize = function()....}où l'objet est de type String. Donc, c'est vraiment très simple.
Buhake Sindi
4

La réponse d'Ivo est bonne, mais je préfère ne pas correspondre \wcar il n'est pas nécessaire de capitaliser 0-9 et AZ. Nous pouvons les ignorer et ne faire correspondre que sur az.

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

C'est le même résultat, mais je pense que plus clair en termes de code auto-documenté.

Beaucoup d'argent
la source
Cela échouera pour la lettre non anglais: "Är Toaletten". Votre réponse, des années après que de très bonnes réponses aient été fournies, ne contribue pas à la discussion.
vsync
@vsync qui semble assez dur. c'est une optimisation de la réponse acceptée. /\b\w/géchoue également pour les lettres non anglaises. Tout le monde ne traite pas des caractères Unicode, et cela aidera ceux qui ne le veulent pas.
Big Money
1
Très bien .. Je ne pense pas que vous devriez utiliser ceci à la place de la réponse principale simplement parce que vous n'avez pas besoin d'autres langues à part l'anglais. Ce n'est pas une justification suffisante car il n'y a pas de pénalité pour le faire pour tous les caractères ASCII comme indiqué dans la question principale
vsync
3

Si vous utilisez lodash dans votre application JavaScript, vous pouvez utiliser _.capitalize :

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

vicke4
la source
3

Une manière concise ES6 de le faire pourrait ressembler à ceci.

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

Cela ne fait que mettre en majuscule la première lettre et n'affecte pas le reste de la casse de la phrase.

Otman Zaib
la source
2

Ma solution:

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

Exemple:

'álL riGht'.toCapital();
// Returns 'Áll Right'
Erick Tatsui
la source
Essayez plusieurs méthodes et votre solution est la plus efficace et respecte les accents du nom jsbench.me/urjeu9wvql
nasatome
Cela ne fonctionne pas: 'a áAA. bb . bbb .cc .d'.toCapital();=>a Áaa. bb . Bbb .cc .d
vsync
Je l'ai fait pour ne pas considérer les mots avec moins de 2 lettres, comme "de", "comme".
Erick Tatsui le
1

Cela devrait couvrir la plupart des cas d'utilisation de base.

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

Edit: meilleure lisibilité de la cartographie.

Gouttes
la source
Pouvez-vous expliquer pourquoi pensez-vous que votre réponse est meilleure que d'autres d'il y a de nombreuses années?
vsync
Pouvez-vous expliquer pourquoi pensez-vous que je voulais dire que ma réponse est la meilleure / ou meilleure que les autres? Je n'ai pas mentionné cela, c'est juste différent. De plus, je ne vous ai pas vu laisser ce commentaire sur d'autres articles, donc je ne comprends vraiment pas. Mais pour commencer: il utilise les fonctionnalités js modernes (déstructuration, grosse flèche, retour implicite), il n'utilise pas regx et c'est une approche plus fonctionnelle du problème. De plus, il a une gestion des erreurs très basique et renvoie une chaîne vide si vous en passez une (pour moi, c'était important).
Drops
ce n'est pas grave d'être différent, mais cela doit être meilleur ou égal à d'autres réponses, et cela semble être ... illisible et certainement rien que l'on mettrait dans le code de production parce que personne ne pourrait le comprendre
vsync
Ahhh ok, donc 50% des solutions ici quelle chaîne monkeypatch vous allez réellement mettre en production? Ou peut-être des expressions régulières alambiquées? Ce sont beaucoup plus faciles à raisonner, non? Imho absolument pas! Dire aussi que personne ne comprendra cela est une affirmation assez subjective. Aussi pour cela, vous avez dit qu'il s'agissait d'un morceau de code déchiqueté (plus de fonctionnalités mais ce n'est pas le cas ici). Comment pour que cela soit déchiqueté et ma solution personne ne comprendra? Il n'y a aucun moyen de démêler ces expressions régulières sans perdre des heures.
Drops
Ce code a été rédigé par M. Resig lui-même et ne devrait pas être remis en question. Vous, par contre, manquez de crédibilité, en raison de votre anonymat. Quoi qu'il en soit, une solution Regex est plus courte, s'exécute beaucoup plus rapidement et est également facile à lire par quiconque a appris les bases de Regex. Il n'y a guère grand chose à "démêler" dans ceci: /\b\w/g...
vsync
1

Cette solution n'utilise pas de regex, prend en charge les caractères accentués et est également prise en charge par presque tous les navigateurs.

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

Usage:

console.log (capitalizeIt ('çao 2nd inside Javascript program'));

Production:

Çao 2nd Inside Javascript Program

Nabarag Paul
la source
1
Cette façon consomme beaucoup de ressources CPU. JavaScript ne change pas les valeurs primitives, ce qui implique la création d'une nouvelle chaque fois qu'une opération est effectuée. Il vaut mieux utiliser des fonctions natives comme "replace", exempli gratia.
Daniel Bandeira
0

http://www.mediacollege.com/internet/javascript/text/case-capitalize.html est l'une des nombreuses réponses disponibles.

Google peut être tout ce dont vous avez besoin pour de tels problèmes.

Une approche naïve consisterait à diviser la chaîne par un espace, à mettre en majuscule la première lettre de chaque élément du tableau résultant et à la joindre à nouveau. Cela laisse les majuscules existantes seules (par exemple, HTML reste HTML et ne devient pas quelque chose de stupide comme Html). Si vous ne voulez pas que cela affecte, mettez toute la chaîne en minuscules avant de la fractionner.

Alan Plum
la source
0

Ce code met en majuscule les mots après le point:

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;
}
Flavio
la source
0

J'aime aller avec un processus simple. Commencez par changer la chaîne en tableau pour une itération facile, puis en utilisant la fonction de carte, changez chaque mot comme vous le souhaitez.

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;
  }
Mritunjay Upadhyay
la source
0

Jquery ou Javascipt ne fournit pas de méthode intégrée pour y parvenir.

La transformation de test CSS (text-transform: capitalize;) ne met pas vraiment en majuscule les données de la chaîne mais montre un rendu en majuscule à l'écran.

Si vous recherchez un moyen plus légitime d'y parvenir au niveau des données en utilisant plain vanillaJS, utilisez cette solution =>

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);
    }
}
siwalikm
la source
0

Utilisez ceci:

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>

Sanjay
la source
0

Vous pouvez utiliser ce qui suit pour mettre des mots en majuscules dans une chaîne:

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;

}
Marcos Torres
la source
0

Il y a aussi locutus: https://locutus.io/php/strings/ucwords/ qui le définit de cette façon:

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();
  });
};
géoidesique
la source
0

J'utiliserais regex à cette fin:

myString = '  this Is my sTring.  ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
Légende Newt
la source