web-dev-qa-db-fra.com

Convertir camelCaseText en texte en phrases majuscules

Comment puis-je convertir une chaîne de type "helloThere" ou "HelloThere" en "Hello There" en JavaScript?

javascriptregexstring
91
HyderA
var text = 'helloThereMister';
var result = text.replace( /([A-Z])/g, " $1" );
var finalResult = result.charAt(0).toUpperCase() + result.slice(1); // capitalize the first letter - as an example.

Notez l'espace dans " $1".

EDIT: ajout d'un exemple de capitalisation de la première lettre. Bien sûr, si la première lettre est déjà en majuscule, vous disposerez d’un espace disponible à supprimer.

109
ZenMaster

Vous pouvez aussi utiliser lodash :

lodash.startCase(str);

Exemple:

_.startCase('helloThere');
// ➜ 'Hello There'

Lodash est une excellente bibliothèque pour donner des raccourcis à de nombreuses tâches js quotidiennes. Il existe de nombreuses autres fonctions de manipulation de chaînes similaires telles que camelCase, kebabCase etc.

52
Wtower

J'ai eu un problème similaire et je l'ai traité comme suit:

stringValue.replace(/([A-Z]+)*([A-Z][a-z])/g, "$1 $2")

Pour une solution plus robuste:

stringValue.replace(/([A-Z]+)/g, " $1").replace(/([A-Z][a-z])/g, " $1")

http://jsfiddle.net/PeYYQ/

Contribution:

 helloThere 
 HelloThere 
 ILoveTheUSA
 iLoveTheUSA

Sortie:

 hello There 
 Hello There 
 I Love The USA
 i Love The USA
41
James Khoury

Exemple sans effets secondaires.

function camel2title(camelCase) {
  // no side-effects
  return camelCase
    // inject space before the upper case letters
    .replace(/([A-Z])/g, function(match) {
       return " " + match;
    })
    // replace first char with upper case
    .replace(/^./, function(match) {
      return match.toUpperCase();
    });
}

Dans ES6

const camel2title = (camelCase) => camelCase
  .replace(/([A-Z])/g, (match) => ` ${match}`)
  .replace(/^./, (match) => match.toUpperCase());
22
renevanderark

Voici ma version de celui-ci. Il ajoute un espace avant chaque lettre anglaise UpperCase qui vient après une lettre anglaise minuscule et met également en majuscule la première lettre si nécessaire:

Par exemple:
thisIsCamelCase -> Ceci est l'affaire Camel
this IsCamelCase -> Ceci est l'affaire Camel
thisIsCamelCase123 -> C'est Camel Case123

  function camelCaseToTitleCase(camelCase){
    if (camelCase == null || camelCase == "") {
      return camelCase;
    }

    camelCase = camelCase.trim();
    var newText = "";
    for (var i = 0; i < camelCase.length; i++) {
      if (/[A-Z]/.test(camelCase[i])
          && i != 0
          && /[a-z]/.test(camelCase[i-1])) {
        newText += " ";
      }
      if (i == 0 && /[a-z]/.test(camelCase[i]))
      {
        newText += camelCase[i].toUpperCase();
      } else {
        newText += camelCase[i];
      }
    }

    return newText;
  }
9
asafd

La meilleure chaîne que j'ai trouvée pour tester les fonctions de cas de chameau à titre de cas est cet exemple ridiculement absurde, qui teste de nombreux cas Edge. A ma connaissance, aucune des fonctions précédemment publiées ne gère cela correctement:

ToGetYourGEDInTimeASongoutbaisThe26ABCsIsOfTheEssenceButAPersonalCardCardForUser456InRoom26AContaining ABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D2}

Cela devrait être converti en:

Pour obtenir votre GED à temps, une chanson sur le 26 ABC est essentielle, mais une carte d'identité personnelle pour l'utilisateur 456 dans la salle 26A contenant ABC 26 fois n'est pas aussi facile que 123 pour C3PO ou R2D2 ou 2R2D} _

Si vous voulez juste une fonction simple qui gère les cas comme celui ci-dessus (et plus de cas que la plupart des réponses précédentes), voici celle que j'ai écrite. Ce code n'est pas particulièrement élégant ni rapide, mais il est simple, compréhensible et fonctionne.

Vous en trouverez un exemple en ligne ici: http://jsfiddle.net/q5gbye2w/56/

// Take a single camel case string and convert it to a string of separate words (with spaces) at the camel-case boundaries.
// 
// E.g.:
//    ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D
//                                                  --> To Get Your GED In Time A Song About The 26 ABCs Is Of The Essence But A Personal ID Card For User 456 In Room 26A Containing ABC 26 Times Is Not As Easy As 123 For C3PO Or R2D2 Or 2R2D
//    helloThere                              --> Hello There
//    HelloThere                              --> Hello There 
//    ILoveTheUSA                             --> I Love The USA
//    iLoveTheUSA                             --> I Love The USA
//    DBHostCountry                           --> DB Host Country
//    SetSlot123ToInput456                    --> Set Slot 123 To Input 456
//    ILoveTheUSANetworkInTheUSA              --> I Love The USA Network In The USA
//    Limit_IOC_Duration                      --> Limit IOC Duration
//    This_is_a_Test_of_Network123_in_12_days --> This Is A Test Of Network 123 In 12 Days
//    ASongAboutTheABCsIsFunToSing                  --> A Song About The ABCs Is Fun To Sing
//    CFDs                                    --> CFDs
//    DBSettings                              --> DB Settings
//    IWouldLove1Apple                        --> 1 Would Love 1 Apple
//    Employee22IsCool                        --> Employee 22 Is Cool
//    SubIDIn                                 --> Sub ID In
//    ConfigureCFDsImmediately                --> Configure CFDs Immediately
//    UseTakerLoginForOnBehalfOfSubIDInOrders --> Use Taker Login For On Behalf Of Sub ID In Orders
//
function camelCaseToTitleCase(in_camelCaseString) {
        var result = in_camelCaseString                         // "ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D"
            .replace(/([a-z])([A-Z][a-z])/g, "$1 $2")           // "To Get YourGEDIn TimeASong About The26ABCs IsOf The Essence ButAPersonalIDCard For User456In Room26AContainingABC26Times IsNot AsEasy As123ForC3POOrR2D2Or2R2D"
            .replace(/([A-Z][a-z])([A-Z])/g, "$1 $2")           // "To Get YourGEDIn TimeASong About The26ABCs Is Of The Essence ButAPersonalIDCard For User456In Room26AContainingABC26Times Is Not As Easy As123ForC3POOr R2D2Or2R2D"
            .replace(/([a-z])([A-Z]+[a-z])/g, "$1 $2")          // "To Get Your GEDIn Time ASong About The26ABCs Is Of The Essence But APersonal IDCard For User456In Room26AContainingABC26Times Is Not As Easy As123ForC3POOr R2D2Or2R2D"
            .replace(/([A-Z]+)([A-Z][a-z][a-z])/g, "$1 $2")     // "To Get Your GEDIn Time A Song About The26ABCs Is Of The Essence But A Personal ID Card For User456In Room26A ContainingABC26Times Is Not As Easy As123ForC3POOr R2D2Or2R2D"
            .replace(/([a-z]+)([A-Z0-9]+)/g, "$1 $2")           // "To Get Your GEDIn Time A Song About The 26ABCs Is Of The Essence But A Personal ID Card For User 456In Room 26A Containing ABC26Times Is Not As Easy As 123For C3POOr R2D2Or 2R2D"
            
            // Note: the next regex includes a special case to exclude plurals of acronyms, e.g. "ABCs"
            .replace(/([A-Z]+)([A-Z][a-rt-z][a-z]*)/g, "$1 $2") // "To Get Your GED In Time A Song About The 26ABCs Is Of The Essence But A Personal ID Card For User 456In Room 26A Containing ABC26Times Is Not As Easy As 123For C3PO Or R2D2Or 2R2D"
            .replace(/([0-9])([A-Z][a-z]+)/g, "$1 $2")          // "To Get Your GED In Time A Song About The 26ABCs Is Of The Essence But A Personal ID Card For User 456In Room 26A Containing ABC 26Times Is Not As Easy As 123For C3PO Or R2D2Or 2R2D"  

						// Note: the next two regexes use {2,} instead of + to add space on phrases like Room26A and 26ABCs but not on phrases like R2D2 and C3PO"
            .replace(/([A-Z]{2,})([0-9]{2,})/g, "$1 $2")        // "To Get Your GED In Time A Song About The 26ABCs Is Of The Essence But A Personal ID Card For User 456 In Room 26A Containing ABC 26 Times Is Not As Easy As 123 For C3PO Or R2D2 Or 2R2D"
            .replace(/([0-9]{2,})([A-Z]{2,})/g, "$1 $2")        // "To Get Your GED In Time A Song About The 26 ABCs Is Of The Essence But A Personal ID Card For User 456 In Room 26A Containing ABC 26 Times Is Not As Easy As 123 For C3PO Or R2D2 Or 2R2D"
            .trim();


  // capitalize the first letter
  return result.charAt(0).toUpperCase() + result.slice(1);
}

Alternativement, comme l'utilisateur suggéré par Barno , utiliser SugarJS est une solution simple si vous voulez bien accéder à cette bibliothèque. Je ne suis pas sûr s'il gère la chaîne de test que je décris ci-dessus, cependant; Je n'ai pas essayé sur cette entrée.

7
Chris Kline

Ok, j'ai quelques années de retard dans le jeu, mais j'avais une question similaire et je voulais créer une solution à remplacement unique pour chaque entrée possible. Je dois donner l'essentiel du crédit à @ZenMaster dans ce fil et à @Benjamin Udink ten Cate dans this thread .

var camelEdges = /([A-Z](?=[A-Z][a-z])|[^A-Z](?=[A-Z])|[a-zA-Z](?=[^a-zA-Z]))/g;
var textArray = ["lowercase",
                 "Class",
                 "MyClass",
                 "HTML",
                 "PDFLoader",
                 "AString",
                 "SimpleXMLParser",
                 "GL11Version",
                 "99Bottles",
                 "May5",
                 "BFG9000"];
var text;
var resultArray = [];
for (var i = 0; i < a.length; i++){
    text = a[i];
    text = text.replace(camelEdges,'$1 ');
    text = text.charAt(0).toUpperCase() + text.slice(1);
    resultArray.Push(text);
}

Il a trois clauses, toutes utilisant lookahead pour empêcher le moteur de regex de consommer trop de caractères:

  1. [A-Z](?=[A-Z][a-z]) recherche une lettre majuscule suivie d'une majuscule, puis d'une minuscule. Ceci est pour mettre fin aux acronymes comme USA.
  2. [^A-Z](?=[A-Z]) recherche une lettre non majuscule suivie d'une lettre majuscule. Ceci termine les mots comme myWord et les symboles comme 99Bottles.
  3. [a-zA-Z](?=[^a-zA-Z]) recherche une lettre suivie d'une non-lettre. Ceci termine les mots avant les symboles tels que BFG9000.

Cette question était au sommet de mes résultats de recherche, alors j'espère pouvoir faire gagner du temps aux autres!

5
Christopher Smith

Vous pouvez utiliser une fonction comme celle-ci:

function fixStr(str) {
    var out = str.replace(/^\s*/, "");  // strip leading spaces
    out = out.replace(/^[a-z]|[^\s][A-Z]/g, function(str, offset) {
        if (offset == 0) {
            return(str.toUpperCase());
        } else {
            return(str.substr(0,1) + " " + str.substr(1).toUpperCase());
        }
    });
    return(out);
}

"hello World" ==> "Hello World"
"HelloWorld" ==> "Hello World"
"FunInTheSun" ==? "Fun In The Sun"

Code avec un tas de chaînes de test ici: http://jsfiddle.net/jfriend00/FWLuV/ .

Version alternative qui garde les espaces de début ici: http://jsfiddle.net/jfriend00/Uy2ac/ .

3
jfriend00

Cela fonctionne pour moi vérifier ceci

CamelcaseToWord ("MyName"); // retourne mon nom

    function CamelcaseToWord(string){
      return string.replace(/([A-Z]+)/g, " $1").replace(/([A-Z][a-z])/g, " $1");
    }
2
Poorna Rao

En me basant sur l'un des exemples ci-dessus, j'ai trouvé ceci:

const camelToTitle = (camelCase) => camelCase
  .replace(/([A-Z])/g, (match) => ` ${match}`)
  .replace(/^./, (match) => match.toUpperCase())
  .trim()

Cela fonctionne pour moi car il utilise .trim() pour gérer le cas Edge où la première lettre est en majuscule et vous vous retrouvez avec un espace supplémentaire. 

Référence: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

2
Anthony S.

essayez cette bibliothèque

http://sugarjs.com/api/String/titleize

'man from the boondocks'.titleize()>"Man from the Boondocks"
'x-men: the last stand'.titleize()>"X Men: The Last Stand"
'TheManWithoutAPast'.titleize()>"The Man Without a Past"
'raiders_of_the_lost_ark'.titleize()>"Raiders of the Lost Ark"
2
Barno

Je n'ai pas essayé la réponse de tout le monde, mais les quelques solutions avec lesquelles j'ai bricolé n'ont pas répondu à toutes mes exigences.

J'ai pu trouver quelque chose qui a fait ...

export const jsObjToCSSString = (o={}) =>
    Object.keys(o)
          .map(key => ({ key, value: o[key] }))
          .map(({key, value}) =>
              ({
                key: key.replace( /([A-Z])/g, "-$1").toLowerCase(),
                value
              })
          )
          .reduce(
              (css, {key, value}) => 
                  `${css} ${key}: ${value}; `.trim(), 
              '')
1
Tabbyofjudah

Ci-dessous se trouve un lien qui illustre une chaîne de cas de chameaux en chaîne de phrases à l'aide de regex.

Contribution

myCamelCaseSTRINGToSPLITDemo

Sortie

my Camel Case STRING To SPLIT Demo

Ceci est regex pour la conversion de chameau en texte de phrase

(?=[A-Z][a-z])|([A-Z]+)([A-Z][a-rt-z][a-z]\*)

avec $1 $2 en substitution.

Cliquez pour afficher la conversion sur regex

1
Rahul

Je pense que cela peut être fait simplement avec la reg exp /([a-z]|[A-Z]+)([A-Z])/g et le remplacement "$1 $2".

ILoveTheUSADope -> J'aime les USA Dope

0
Miguel Enrique León Figueras

Aucune des réponses ci-dessus ne fonctionnait parfaitement pour moi, alors j'ai dû venir avec mon propre vélo

function camelCaseToTitle(camelCase) {
    if (!camelCase) {
        return '';
    }

    var pascalCase = camelCase.charAt(0).toUpperCase() + camelCase.substr(1);
    return pascalCase
        .replace(/([a-z])([A-Z])/g, '$1 $2')
        .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')
        .replace(/([a-z])([0-9])/gi, '$1 $2')
        .replace(/([0-9])([a-z])/gi, '$1 $2');
}

Cas de test:

null => ''
'' => ''
'simpleString' => 'Simple String'
'stringWithABBREVIATIONInside => 'String With ABBREVIATION Inside'
'stringWithNumber123' => 'String With Number 123'
'complexExampleWith123ABBR890Etc' => 'Complex Example With 123 ABBR 890 Etc'
0
Vitaliy Ulantikov

Entrée javaScript

Sortie Java Script

   var text = 'javaScript';
    text.replace(/([a-z])([A-Z][a-z])/g, "$1 $2").charAt(0).toUpperCase()+text.slice(1).replace(/([a-z])([A-Z][a-z])/g, "$1 $2");
0
Manas