web-dev-qa-db-fra.com

Javascript camelCase à la forme régulière

J'ai essayé d'obtenir une commande JavaScript regex pour transformer quelque chose comme thisString en This String, mais le plus proche que j'ai eu consiste à remplacer une lettre, ce qui aboutit à quelque chose comme Thi String ou This tring. Des idées?

Pour clarifier, je peux gérer la simplicité de la majuscule d'une lettre, je ne suis tout simplement pas aussi fort avec RegEx, et diviser somethingLikeThis en something Like This est l'endroit où j'ai des problèmes.

javascriptregex
137
A Wizard Did It
"thisStringIsGood"
    // insert a space before all caps
    .replace(/([A-Z])/g, ' $1')
    // uppercase the first character
    .replace(/^./, function(str){ return str.toUpperCase(); })

affiche 

This String Is Good


(function() {

  var $textbox = $('#textbox'),
    $result = $('#result'),
    splitter = function() {
      $result.html($textbox.val()
        // insert a space before all caps
        .replace(/([A-Z])/g, ' $1')
        // uppercase the first character
        .replace(/^./, function(str) {
          return str.toUpperCase();
        }));
    };

  $textbox.on('input', splitter);
  
  splitter();
}());
#result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: solid 1px #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  Text to split
  <input id="textbox" value="thisStringIsGood" />
</div>

<div id="result"></div>

317
Vincent Robert

Cela ne m'intéressait pas du tout, en particulier le traitement des séquences de majuscules, comme dans xmlHTTPRequest. Les fonctions répertoriées produiraient "Requête XML" ou "Requête HTTP HTTP", la mienne produisant "Requête HTTP XML".

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

Il existe également une version String.prototype dans un Gist .

80
Matt Wiebe

Cela peut être fait de manière concise avec un look reeadx ( démo en direct ):

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

(Je pensais que le drapeau g (global) était nécessaire, mais curieusement, ce n'est pas le cas.)

L'utilisation de lookahead avec split garantit que la lettre majuscule correspondante n'est pas consommée et évite de traiter avec un espace non significatif si UpperCamelCase est une solution à prendre en compte. Pour capitaliser la première lettre de chacun, vous pouvez utiliser:

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

La méthode de tableau map est une fonctionnalité ES5, mais vous pouvez toujours l'utiliser dans les navigateurs plus anciens avec du code provenant de MDC . Vous pouvez également parcourir les éléments du tableau à l'aide d'une boucle for.

18
PleaseStand

Je pense que cela devrait pouvoir gérer des caractères majuscules consécutifs ainsi que camelCase simple.

Par exemple: someVariable => someVariable, mais ABCCode! = A B C Code. 

L'expression rationnelle ci-dessous fonctionne sur votre exemple, mais également sur l'exemple courant de représentation des abréviations dans 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"

Vous pouvez également ajuster comme ci-dessus pour mettre le premier caractère en majuscule.

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

spacecamel ('quelque chose comme ça')

// valeur renvoyée: quelque chose comme ça

8
kennebec

Une solution qui gère également les chiffres:

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

Testé ici [JSFiddle, pas de bibliothèque. Pas essayé IE]; devrait être assez stable.

4
SamGoody

Lodash s'en occupe bien avec _.startCase()

4
Lawrence Chang

Ma version

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"
0
pykiss

Si vous ne vous souciez pas des anciens navigateurs (ou si vous utilisez une solution de repli rØduirepour eux), vous pouvez scinder mŒme des chaines telles que 'xmlHTTPRequest' (mais certainement pas celles de 'XMLHTTPRequest').

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(' ');
}
0
Daniel Fernández Espinoza

Essayez cette solution ici -

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;
0
M3ghana