web-dev-qa-db-fra.com

Capitaliser les mots dans la chaîne

Quelle est la meilleure approche pour capitaliser des mots dans une chaîne?

136
vsync

L'implémentation la plus courte pour la majuscule des mots dans une chaîne est la suivante à l'aide des fonctions de flèche de ES6: 

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

Mise en œuvre compatible ES5:

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

La regex correspond fondamentalement à 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 Word (le début ou la fin de Word);
  • \w correspond au méta-caractère suivant [a-zA-Z0-9].

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

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

Cette expression rationnelle correspond à la première lettre et à chaque lettre non-blanche précédée par une espace au sein de la chaîne donnée et ne transforme que 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 sans capture aurait pu être utilisé ici comme suit /(?:^|\s)\S/g même si l'indicateur g dans notre expression rationnelle ne capturera pas les sous-groupes par leur conception de toute façon.

À votre santé!

185
Ivo
String.prototype.capitalize = function() {
    return this.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};

Utilisation:

'your string'.capitalize(); // -> 'Your String'

  • corrige La solution de Marco Demaio où la première lettre précédée d'un espace n'est pas en majuscule.

    ' javascript'.capitalize(); // -> ' Javascript'
    
  • peut gérer les symboles nationaux et les lettres accentuées.

    'бабушка курит трубку'.capitalize();  // -> 'Бабушка Курит Трубку'
    'località àtilacol'.capitalize()      // -> 'Località Àtilacol'
    

ADD-ON Je trouve cela utile

String.prototype.capitalize = function(lower) {
    return (lower ? this.toLowerCase() : this).replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};
'javaSCrIPT'.capitalize();      // -> 'JavaSCrIPT'
'javaSCrIPT'.capitalize(true);  // -> 'Javascript'
205
disfated
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

28
vsync

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

Je ne connais pas la raison, mais apparemment, le \b dans regexp correspond aux lettres accentuées (testé sur IE8 et Chrome), de sorte qu'une chaîne telle que "località" SERAIT MAL CONVERTIE EN "LocalitÀ" (la lettre à est en majuscule, l'expression rationnelle pense que c'est une limite de Word)

Une fonction plus générale que 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() );
15
Marco Demaio

John Resig (de jQuery fame) a porté un script Perl, écrit par John Gruber, en JavaScript. Ce script capitalise de manière plus intelligente, il ne capitalise pas les petits mots comme 'of' et 'et' par exemple. 

Vous pouvez le trouver ici: Titre Capitalisation en JavaScript

4
meouw

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 faire string.capitalize() et cela va mettre en majuscule chaque 1ère lettre de chaque mot.

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

4
Buhake Sindi

Puisque tout le monde vous a donné la réponse JavaScript que vous avez demandée, je tiens à préciser que la propriété CSS text-transform: capitalize fera exactement cela.

Je me rends compte que ceci pourrait ne pas être ce que vous demandez - vous ne nous avez pas expliqué le contexte dans lequel vous utilisez ceci - mais si c'est juste pour la présentation, je choisirais certainement le CSS alternative.

4
David Hedlund

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>

3
vicke4

Une façon concise de l’ES6 de le faire pourrait ressembler à ceci.

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

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

1
Otman Zaib

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);
        } else {
            return i;
        }
    }).join(' ');
};

Exemple:

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

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: lisibilité améliorée du mappage.

1
Drops

Vous pouvez utiliser les éléments suivants pour mettre en majuscule des mots 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;

}
0
Marcos Torres

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

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

Si vous recherchez un moyen plus légitime d’atteindre cet objectif dans le niveau de 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);
    }
}
0
siwalikm

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>

0
Sanjay

La réponse d'Ivo est bonne, mais je préfère ne pas apparier sur \w car il n'est pas nécessaire de capitaliser 0-9 et A à Z. Nous pouvons les ignorer et ne faire correspondre que sur a-z.

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

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

0
Big Money

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 résoudre ces problèmes.

Une approche naïve consisterait à scinder la chaîne par des espaces, à mettre en majuscule la première lettre de chaque élément du tableau obtenu et à le rejoindre. Cela laisse toute la capitalisation existante (par exemple, HTML reste HTML et ne devient pas idiot comme Html). Si vous ne voulez pas que cela affecte, convertissez la chaîne entière en minuscule avant de la scinder.

0
Alan Plum

Cette solution n'utilise pas regex, supporte les caractères accentués et supporte 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;
    }
}    

Utilisation:  

console.log (capitalizeIt ('çao 2nd dans le programme Javascript'));

Sortie:  

Çao 2nd Inside Programme Javascript

0
Nabarag Paul

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

J'aime y aller avec un processus facile. Commencez par changer de chaîne dans Array pour une itération facile, puis utilisez la fonction map pour changer 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;
  }
0