Konvertieren Sie camelCaseText in Title Case Text

Lesezeit: 8 Minuten

Benutzer-Avatar
HyderA

Wie kann ich eine Zeichenfolge wie „helloThere“ oder „HelloThere“ in JavaScript in „Hello There“ umwandeln?

  • hmm.. was ist Ihre erwartete Ausgabe für iLiveInTheUSA?

    – Wim

    29. August 2011 um 2:06 Uhr

  • Ich lebe in der U … oh Mist! – Aber in meinem Fall habe ich einen begrenzten Satz Saiten und es gibt keine Saiten, die einen einfachen Konverter kaputt machen könnten. Aber guter Fang!

    – HyderA

    29. August 2011 um 2:12 Uhr


  • Ebenso sollte uSBPort zu “USB Port” führen.

    – Signonsridhar

    19. Juni 2017 um 18:31 Uhr

  • @wim: iLiveInTheUSA sollte iLiveInTheUsa in korrekter Camel-Case-Notation sein, aber das würde andere Probleme mit sich bringen.

    – Konrad Höffner

    4. Juni 2019 um 14:24 Uhr


  • HelloThere -> Hello Es gibt keinen Satzfall, der Titelfall ist

    – RichTurner

    13. Januar 2021 um 10:25 Uhr

Alternativ verwenden Lodash:

lodash.startCase(str);

Beispiel:

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

Lodash ist eine feine Bibliothek, um viele alltägliche js-Aufgaben abzukürzen. Es gibt viele andere ähnliche String-Manipulationsfunktionen wie z camelCase, kebabCase etc.

  • Wenn Sie es versuchen hello world dann sollte Ausgabe sein Hello ThereIn diesem Fall ist loadash nicht hilfreich.

    – Abhishek Kumar

    28. August 2019 um 5:49 Uhr

  • @AbhishekKumar startCase of lodash wird tatsächlich konvertiert hello world zu Hello World lodash.com/docs/4.17.15#upperFirst

    – Benutzer1696017

    20. Februar 2020 um 16:44 Uhr

  • Du hast recht Bruder. Aus Versehen habe ich geschrieben hello there zu hello world.

    – Abhishek Kumar

    20. Februar 2020 um 17:02 Uhr

  • Jedes Mal, wenn ich denke, “es gibt keine Möglichkeit, dass Lodash das auch tut”, tut es das.

    – efru

    3. März 2020 um 6:07 Uhr

  • Seien Sie vorsichtig, ab v4 entfernt diese Funktion Sonderzeichen wie ä und konvertiert sie in ASCII-Zeichen (in diesem Fall a).

    – Kollerek

    27. März 2020 um 13:53 Uhr

  • Solide, +1 für das es6-Snippet.

    – Brad Stell

    28. August 2017 um 20:28 Uhr

  • Zu Ihrer Information, dies fügt dem Anfang des Satzes zusätzlichen Leerraum hinzu.

    – Dale Zak

    8. November 2017 um 17:47 Uhr

  • @DaleZak, verspätet danke! ich hätten Ich wollte es erreichen, aber anscheinend hat der Community-Roboter für mich gefixt … ?

    – Renevanderark

    18. Juni 2021 um 8:44 Uhr

Benutzer-Avatar
James Khoury

Ich hatte ein ähnliches Problem und habe es so gelöst:

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

Für eine robustere Lösung:

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

http://jsfiddle.net/PeYYQ/

Eingang:

 helloThere 
 HelloThere 
 ILoveTheUSA
 iLoveTheUSA

Ausgabe:

 hello There 
 Hello There 
 I Love The USA
 i Love The USA

  • es fügt ein zusätzliches Leerzeichen in start ein

    – Hannad Rehmann

    26. Juni 2019 um 8:47 Uhr

  • Es ist kein Satzfall, wie OP gefragt hat. Der erste Buchstabe sollte groß geschrieben werden.

    – Erster Scheitelpunkt

    10. September 2019 um 14:13 Uhr

  • Außerdem fügt es ein zusätzliches Leerzeichen zwischen den Wörtern hinzu

    – Alacritas

    9. Juni 2020 um 7:45 Uhr

  • Dies sollte die Platzprobleme lösen: stringValue.replace(/([A-Z]+)*([A-Z][a-z])/g, “$1 $2”).trim()

    – Adam

    17. Februar um 5:48 Uhr


Die beste Zeichenfolge, die ich zum Testen von Camel-Case-to-Title-Case-Funktionen gefunden habe, ist dieses lächerlich unsinnige Beispiel, das viele Grenzfälle testet. Nach meinem besten Wissen behandelt keine der zuvor geposteten Funktionen dies korrekt:

__IhreGEDInTimeASongaboutthe26ABCszubekommen,istvonderEssenz,aberEINpersönlicherAusweisfürUser_456inRoom26AmitABC26Timesistnichtsoeinfachwie123fürC3POorR2D2oder2R2D

Dies sollte umgewandelt werden in:

Um Ihren GED rechtzeitig zu bekommen, ist ein Lied über die 26 ABCs von entscheidender Bedeutung, aber ein persönlicher Ausweis für Benutzer 456 in Raum 26A, der ABC 26 Mal enthält, ist nicht so einfach wie 123 für C3PO oder R2D2 oder 2R2D

Wenn Sie nur eine einfache Funktion wünschen, die Fälle wie den obigen behandelt (und mehr Fälle als viele der vorherigen Antworten), hier ist die, die ich geschrieben habe. Dieser Code ist nicht besonders elegant oder schnell, aber er ist einfach, verständlich und funktioniert.

Das folgende Snippet enthält ein online lauffähiges Beispiel:

var mystrings = [ "__ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser_456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D", "helloThere", "HelloThere", "ILoveTheUSA", "iLoveTheUSA", "DBHostCountry", "SetSlot123ToInput456", "ILoveTheUSANetworkInTheUSA", "Limit_IOC_Duration", "_This_is_a_Test_of_Network123_in_12__days_",  "ASongAboutTheABCsIsFunToSing", "CFDs", "DBSettings", "IWouldLove1Apple", "Employee22IsCool", "SubIDIn",  "ConfigureABCsImmediately", "UseMainNameOnBehalfOfSubNameInOrders" ];

// Take a single camel case string and convert it to a string of separate words (with spaces) at the camel-case boundaries.
// 
// E.g.:
//    __ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser_456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D
//                                            --> 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                        --> I 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                         // "__ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser_456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D"
            .replace(/(_)+/g, ' ')                              // " ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser 456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D"
            .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()                                             // "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"
           ;

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

for (var i = 0; i < mystrings.length; i++) {
  jQuery(document.body).append("<br />\"");
  jQuery(document.body).append(camelCaseToTitleCase(mystrings[i]));
  jQuery(document.body).append("\"<br>(was: \"");
  jQuery(document.body).append(mystrings[i]);
  jQuery(document.body).append("\") <br />");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

  • es fügt ein zusätzliches Leerzeichen in start ein

    – Hannad Rehmann

    26. Juni 2019 um 8:47 Uhr

  • Es ist kein Satzfall, wie OP gefragt hat. Der erste Buchstabe sollte groß geschrieben werden.

    – Erster Scheitelpunkt

    10. September 2019 um 14:13 Uhr

  • Außerdem fügt es ein zusätzliches Leerzeichen zwischen den Wörtern hinzu

    – Alacritas

    9. Juni 2020 um 7:45 Uhr

  • Dies sollte die Platzprobleme lösen: stringValue.replace(/([A-Z]+)*([A-Z][a-z])/g, “$1 $2”).trim()

    – Adam

    17. Februar um 5:48 Uhr


Benutzer-Avatar
Antonius S.

Basierend auf einem der obigen Beispiele bin ich auf Folgendes gekommen:

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

Es funktioniert für mich, weil es verwendet .trim() um den Randfall zu behandeln, in dem der erste Buchstabe groß geschrieben wird und Sie am Ende ein zusätzliches führendes Leerzeichen haben.

Referenz:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

1010330cookie-checkKonvertieren Sie camelCaseText in Title Case Text

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy