Hoe “camelCase” naar “Camel Case” converteren?

Codefragment weergeven

Antwoord 2, autoriteit 21%

Ik had hier een nutteloze interesse in, vooral bij het afhandelen van hoofdletters, zoals in xmlHTTPRequest. De vermelde functies zouden “Xml H T T P Request” of “Xml HTTPRequest” produceren, de mijne produceert “Xml HTTP Request”.

function unCamelCase (str){
    return str
        // insert a space between lower & upper
        .replace(/([a-z])([A-Z])/g, '$1 $2')
        // space before last upper in a sequence followed by lower
        .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
        // uppercase the first character
        .replace(/^./, function(str){ return str.toUpperCase(); })
}

Er is ook een String.prototype-versie in het kort.

Antwoord 3, autoriteit 5%

Dit kan beknopt worden gedaan met regex lookahead (live demo):

function splitCamelCaseToString(s) {
    return s.split(/(?=[A-Z])/).join(' ');
}

(Ik dacht dat de g(algemene) vlag nodig was, maar vreemd genoeg is dat in dit specifieke geval niet het geval.)

Het gebruik van vooruitkijken met splitzorgt ervoor dat de overeenkomende hoofdletter niet wordt verbruikt en vermijdt het omgaan met een voorloopspatie als UpperCamelCase iets is waarmee u te maken krijgt. Om de eerste letter van elk een hoofdletter te geven, kunt u het volgende gebruiken:

function splitCamelCaseToString(s) {
    return s.split(/(?=[A-Z])/).map(function(p) {
        return p.charAt(0).toUpperCase() + p.slice(1);
    }).join(' ');
}

De maparray-methode is een ES5-functie, maar je kunt deze nog steeds gebruiken in oudere browsers met een code van MDC. Als alternatief kunt u de array-elementen herhalen met behulp van een for-lus.

Antwoord 4, autoriteit 5%

Ik denk dat dit zowel opeenvolgende hoofdletters als eenvoudige camelCase moet kunnen verwerken.

Bijvoorbeeld: someVariable => een variabele, maar ABCCode != A B C Code.

De onderstaande regex werkt op uw voorbeeld, maar ook op het gebruikelijke voorbeeld van afkortingen in camcelCase.

"somethingLikeThis"
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([a-z])/g, ' $1$2')
    .replace(/\ +/g, ' ') => "something Like This"
"someVariableWithABCCode"
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/([A-Z])([a-z])/g, ' $1$2')
    .replace(/\ +/g, ' ') => "some Variable With ABC Code"

U kunt ook aanpassen zoals hierboven om het eerste teken met een hoofdletter te schrijven.

Antwoord 5, autoriteit 3%

Lodashhandelt dit netjes af met _.startCase()

Antwoord 6, autoriteit 3%

function spacecamel(s){
    return s.replace(/([a-z])([A-Z])/g, '$1 $2');
}

spacecamel(‘somethingLikeThis’)

// geretourneerde waarde: zoiets als dit

Antwoord 7

Een oplossing die ook met getallen omgaat:

function capSplit(str){
   return str.replace
      ( /(^[a-z]+)|[0-9]+|[A-Z][a-z]+|[A-Z]+(?=[A-Z][a-z]|[0-9])/g
      , function(match, first){
          if (first) match = match[0].toUpperCase() + match.substr(1);
          return match + ' ';
          }
       )
   }

Hier getest [JSFiddle, geen bibliotheek.IE niet geprobeerd]; zou redelijk stabiel moeten zijn.

Antwoord 8

Probeer deze oplossing hier –

var value = "myCamelCaseText";
var newStr = '';
for (var i = 0; i < value.length; i++) {
  if (value.charAt(i) === value.charAt(i).toUpperCase()) {
    newStr = newStr + ' ' + value.charAt(i)
  } else {
    (i == 0) ? (newStr += value.charAt(i).toUpperCase()) : (newStr += value.charAt(i));
  }
}
return newStr;

Antwoord 9

Als je niet om oudere browsers geeft (of het niet erg vindt om er een fallback reduce-functie voor te gebruiken), kan dit zelfs strings zoals ‘xmlHTTPRequest’ (maar zeker het soort ‘ XMLHTTPRequest’ kan niet).

function splitCamelCase(str) {
        return str.split(/(?=[A-Z])/)
                  .reduce(function(p, c, i) {
                    if (c.length === 1) {
                        if (i === 0) {
                            p.push(c);
                        } else {
                            var last = p.pop(), ending = last.slice(-1);
                            if (ending === ending.toLowerCase()) {
                                p.push(last);
                                p.push(c);
                            } else {
                                p.push(last + c);
                            }
                        }
                    } else {
                        p.push(c.charAt(0).toUpperCase() + c.slice(1));
                    }
                    return p;
                  }, [])
                  .join(' ');
}

Antwoord 10

Mijn versie

function camelToSpace (txt) {
  return txt
    .replace(/([^A-Z]*)([A-Z]*)([A-Z])([^A-Z]*)/g, '$1 $2 $3$4')
    .replace(/ +/g, ' ')
}
camelToSpace("camelToSpaceWithTLAStuff") //=> "camel To Space With TLA Stuff"

Antwoord 11

const value = 'camelCase';
const map = {};
let index = 0;
map[index] = [];
for (let i = 0; i < value.length; i++) {
  if (i !== 0 && value[i] === value[i].toUpperCase()) {
    index = i;
    map[index] = [];
  }
  if (i === 0) {
    map[index].push(value[i].toUpperCase());
  } else {
    map[index].push(value[i]);
  }
}
let resultArray = [];
Object.keys(map).map(function (key, index) {
  resultArray = [...resultArray, ' ', ...map[key]];
  return resultArray;
});
console.log(resultArray.join(''));

Antwoord 12

Geen regex, maar handig om eenvoudige en oude technieken als deze te kennen:

var origString = "thisString";
var newString = origString.charAt(0).toUpperCase() + origString.substring(1);