Konvertieren Sie camelCaseText in Satzfalltext

Wie kann ich eine Zeichenfolge wie "helloThere" oder "HelloThere" in JavaScript in "Hello There" konvertieren?

var text = 'helloThereMister';
var result = text.replace( /([A-Z])/g, " $1" );
var finalResult = result.charAt(0).toUpperCase() + result.slice(1);
console.log(finalResult);

Schreiben Sie den ersten Buchstaben groß - als Beispiel.

Beachten Sie den Platz in " $1".

BEARBEITEN: Ein Beispiel für die Großschreibung des ersten Buchstabens wurde hinzugefügt. Falls der erste Buchstabe bereits groß geschrieben ist, haben Sie natürlich einen freien Platz zum Entfernen.

Alternativ mit lodash :

lodash.startCase(str);

Beispiel:

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

Lodash ist eine feine Bibliothek Verknüpfung zu vielen alltäglichen js tasks.There sind viele andere ähnliche String - Manipulation Funktionen zu geben , wie zum Beispiel camelCase, kebabCaseusw.

Ich hatte ein ähnliches Problem und habe es so behandelt:

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

Beispiel ohne Nebenwirkungen.

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

In ES6

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

Die beste Zeichenfolge, die ich zum Testen von Funktionen von Kamelfall zu Titelfall gefunden habe, ist dieses lächerlich unsinnige Beispiel, das viele Randfälle testet. Nach meinem besten Wissen behandelt keine der zuvor veröffentlichten Funktionen dies korrekt :

ToGetYourGEDInTimeASongAboutThe26ABCsIsOfTheEssenceButAPersonalIDCardForUser456InRoom26AContainingABC26TimesIsNotAsEasyAs123ForC3POOrR2D2Or2R2D

Dies sollte konvertiert werden zu:

Um Ihr GED rechtzeitig zu erhalten, ist ein Song über die 26 ABCs von entscheidender Bedeutung, aber ein persönlicher Personalausweis 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 oben genannten behandelt (und mehr Fälle als viele der zuvor beantworteten), ist hier die, die ich geschrieben habe. Dieser Code ist nicht besonders elegant oder schnell, aber er ist einfach, verständlich und funktioniert.

Ein online lauffähiges Beispiel ist jsfiddle , oder Sie können die Ausgabe des folgenden Snippets in Ihrer Konsole anzeigen:

// Take a single camel case string and convert it to a string of separate words (with spaces) at the camel-case boundaries.
// 
// E.g.:
var examples = [
    '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);
}

examples.forEach(str => console.log(str, ' --> \n', camelCaseToTitleCase(str)));

Anhand eines der obigen Beispiele habe ich Folgendes gefunden:

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

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

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

Ok, ich bin ein paar Jahre zu spät zum Spiel, aber ich hatte eine ähnliche Frage und wollte für jede mögliche Eingabe eine Lösung mit einem Ersatz erstellen. Ich muss @ZenMaster in diesem Thread und @Benjamin Udink ten Cate in diesem Thread den größten Teil der Ehre erweisen . Hier ist der Code:

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

Es gibt drei Klauseln, die alle Lookahead verwenden , um zu verhindern, dass die Regex-Engine zu viele Zeichen verbraucht:

1. [A-Z](?=[A-Z][a-z])sucht nach einem Großbuchstaben, gefolgt von einem Großbuchstaben und einem Kleinbuchstaben. Dies soll Akronyme wie USA beenden.
2. [^A-Z](?=[A-Z])sucht nach einem Nicht-Großbuchstaben, gefolgt von einem Großbuchstaben. Dies beendet Wörter wie myWord und Symbole wie 99Bottles.
3. [a-zA-Z](?=[^a-zA-Z])sucht nach einem Buchstaben, gefolgt von einem Nicht-Buchstaben. Dies beendet Wörter vor Symbolen wie BFG9000.

Diese Frage stand ganz oben in meinen Suchergebnissen, sodass ich hoffentlich anderen Zeit sparen kann!

Hier ist meine Version davon. Vor jedem englischen Großbuchstaben, der nach einem englischen Kleinbuchstaben steht, wird ein Leerzeichen eingefügt, und bei Bedarf wird auch der erste Buchstabe groß geschrieben:

Zum Beispiel:
thisIsCamelCase -> Dies ist
Kamelfall this IsCamelCase -> Dies ist
Kamelfall thisIsCamelCase123 -> Dies ist Kamelfall123

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

Diese Implementierung berücksichtigt aufeinanderfolgende Großbuchstaben und Zahlen.

function camelToTitleCase(str) {
  return str
    .replace(/[0-9]{2,}/g, match => ` ${match} `)
    .replace(/[^A-Z0-9][A-Z]/g, match => `${match[0]} ${match[1]}`)
    .replace(/[A-Z][A-Z][^A-Z0-9]/g, match => `${match[0]} ${match[1]}${match[2]}`)
    .replace(/[ ]{2,}/g, match => ' ')
    .replace(/\s./g, match => match.toUpperCase())
    .replace(/^./, match => match.toUpperCase())
    .trim();
}

// ----------------------------------------------------- //

var testSet = [
    'camelCase',
    'camelTOPCase',
    'aP2PConnection',
    'superSimpleExample',
    'aGoodIPAddress',
    'goodNumber90text',
    'bad132Number90text',
];

testSet.forEach(function(item) {
    console.log(item, '->', camelToTitleCase(item));
});

Erwartete Ausgabe:

camelCase -> Camel Case
camelTOPCase -> Camel TOP Case
aP2PConnection -> A P2P Connection
superSimpleExample -> Super Simple Example
aGoodIPAddress -> A Good IP Address
goodNumber90text -> Good Number 90 Text
bad132Number90text -> Bad 132 Number 90 Text

Sie können eine Funktion wie diese verwenden:

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 mit einer Reihe von Testzeichenfolgen hier: http://jsfiddle.net/jfriend00/FWLuV/ .

Alternative Version, die hier führende Leerzeichen enthält: http://jsfiddle.net/jfriend00/Uy2ac/ .

Probieren Sie diese Bibliothek aus

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"

Keine der obigen Antworten funktionierte perfekt für mich, daher musste ich mit einem eigenen Fahrrad kommen:

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

Testfälle:

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

Das funktioniert bei mir

CamelcaseToWord ("MyName"); // gibt meinen Namen zurück

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

Ich denke, dies kann nur mit der Registrierung exp /([a-z]|[A-Z]+)([A-Z])/gund Ersatz gemacht werden "$1 $2".

ILoveTheUSADope -> Ich liebe die USA Dope

Wenn Sie sich mit Capital Camel Case befassen, kann Ihnen dieses Snippet helfen. Außerdem enthält es einige Spezifikationen, sodass Sie sicher sein können, dass es Ihrem Fall entspricht.

export const fromCamelCaseToSentence = (word) =>
  word
    .replace(/([A-Z][a-z]+)/g, ' $1')
    .replace(/([A-Z]{2,})/g, ' $1')
    .replace(/\s{2,}/g, ' ')
    .trim();

Und Spezifikationen:

describe('fromCamelCaseToSentence', () => {
 test('does not fall with a single word', () => {
   expect(fromCamelCaseToSentence('Approved')).toContain('Approved')
   expect(fromCamelCaseToSentence('MDA')).toContain('MDA')
 })

 test('does not fall with an empty string', () => {
   expect(fromCamelCaseToSentence('')).toContain('')
 })

 test('returns the separated by space words', () => {
   expect(fromCamelCaseToSentence('NotApprovedStatus')).toContain('Not Approved Status')
   expect(fromCamelCaseToSentence('GDBState')).toContain('GDB State')
   expect(fromCamelCaseToSentence('StatusDGG')).toContain('Status DGG')
 })
})

Ich habe nicht alle Antworten ausprobiert, aber die wenigen Lösungen, an denen ich herumgebastelt habe, entsprachen nicht allen meinen Anforderungen.

Ich konnte mir etwas einfallen lassen, das ...

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

Unten finden Sie einen Link, der die Zeichenfolge von Kamelfall zu Satz mit Regex demonstriert.

Eingang

myCamelCaseSTRINGToSPLITDemo

Ausgabe

my Camel Case STRING To SPLIT Demo

Dies ist Regex für die Konvertierung von Kamelfall in Satztext

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

mit $1 $2als Subsitution.

Klicken Sie hier, um die Konvertierung in Regex anzuzeigen

Eingang javaScript

Output 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");

Eine weitere Lösung basierend auf RegEx.

respace(str) {
  const regex = /([A-Z])(?=[A-Z][a-z])|([a-z])(?=[A-Z])/g;
  return str.replace(regex, '$& ');
}

Erläuterung

Das obige RegEx besteht aus zwei ähnlichen Teilen, die durch den OR- Operator getrennt sind. Die erste Hälfte:

1. ([A-Z]) - passt zu Großbuchstaben ...
2. (?=[A-Z][a-z]) - gefolgt von einer Folge von Groß- und Kleinbuchstaben.

Bei Anwendung auf die Sequenz FOo entspricht dies effektiv dem F- Buchstaben.

Oder das zweite Szenario:

1. ([a-z]) - passt zu Kleinbuchstaben ...
2. (?=[A-Z]) - gefolgt von einem Großbuchstaben.

Bei Anwendung auf die Sequenz barFoo entspricht dies effektiv dem Buchstaben r .

Wenn alle Ersatzkandidaten gefunden wurden, müssen Sie sie als letztes durch denselben Buchstaben, aber mit einem zusätzlichen Leerzeichen ersetzen. Dies können wir '$& 'als Ersatz verwenden, und es wird in eine übereinstimmende Teilzeichenfolge gefolgt von einem Leerzeichen aufgelöst.

Beispiel

const regex = /([A-Z])(?=[A-Z][a-z])|([a-z])(?=[A-Z])/g
const testWords = ['ACoolExample', 'fooBar', 'INAndOUT', 'QWERTY', 'fooBBar']

testWords.map(w => w.replace(regex, '$& '))
->(5) ["A Cool Example", "foo Bar", "IN And OUT", "QWERTY", "foo B Bar"]

Hinzufügen einer weiteren ES6-Lösung, die mir besser gefallen hat, nachdem ich mit ein paar Gedanken oben nicht zufrieden war.

https://codepen.io/902Labs/pen/mxdxRv?editors=0010#0

const camelize = (str) => str
    .split(' ')
    .map(([first, ...theRest]) => (
        `${first.toUpperCase()}${theRest.join('').toLowerCase()}`)
    )
    .join(' ');