Comment puis-je convertir une chaîne en camel case avec javascript regex
EquipmentClass name
ou Equipment className
ou equipment class name
ou Equipment Class Name
devraient tous devenir: equipmentClassName
.
Je viens de finir par faire ceci:
String.prototype.toCamelCase = function(str) {
return str
.replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
.replace(/\s/g, '')
.replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}
J'essayais d'éviter de chaîner plusieurs déclarations de remplacement. Quelque chose où j'aurais 1 $, 2 $, 3 $ dans ma fonction. Mais ce type de regroupement est difficile à comprendre, et votre mention des problèmes entre navigateurs est une chose à laquelle je n’avais jamais pensé.
En regardant votre code, vous pouvez le réaliser avec seulement deux appels replace
:
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
camelize("EquipmentClass name");
camelize("Equipment className");
camelize("equipment class name");
camelize("Equipment Class Name");
// all output "equipmentClassName"
Edit: Ou avec un seul appel replace
, en capturant les espaces blancs également dans la RegExp
.
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
return index == 0 ? match.toLowerCase() : match.toUpperCase();
});
}
Si quelqu'un utilise lodash , il existe une fonction _.camelCase()
.
_.camelCase('Foo Bar');
// → 'fooBar'
_.camelCase('--foo-bar--');
// → 'fooBar'
_.camelCase('__FOO_BAR__');
// → 'fooBar'
Vous pouvez utiliser cette solution:
function toCamelCase(str){
return str.split(' ').map(function(Word,index){
// If it is the first Word make sure to lowercase all the chars.
if(index == 0){
return Word.toLowerCase();
}
// If it is not the first Word only upper case the first char and lowercase the rest.
return Word.charAt(0).toUpperCase() + Word.slice(1).toLowerCase();
}).join('');
}
Dans le cas spécifique de Scott, je choisirais quelque chose comme:
String.prototype.toCamelCase = function() {
return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});
};
'EquipmentClass name'.toCamelCase() // -> equipmentClassName
'Equipment className'.toCamelCase() // -> equipmentClassName
'equipment class name'.toCamelCase() // -> equipmentClassName
'Equipment Class Name'.toCamelCase() // -> equipmentClassName
La regex correspondra au premier caractère si elle commence par une lettre majuscule, et tout caractère alphabétique suivant un espace, c'est-à-dire 2 ou 3 fois dans les chaînes spécifiées.
En épelant l'expression régulière à /^([A-Z])|[\s-_](\w)/g
, il camèlisera également les noms de trait d'union et de soulignement.
'hyphen-name-format'.toCamelCase() // -> hyphenNameFormat
'underscore_name_format'.toCamelCase() // -> underscoreNameFormat
function toCamelCase(str) {
// Lower cases the string
return str.toLowerCase()
// Replaces any - or _ characters with a space
.replace( /[-_]+/g, ' ')
// Removes any non alphanumeric characters
.replace( /[^\w\s]/g, '')
// Uppercases the first character in each group immediately following a space
// (delimited by spaces)
.replace( / (.)/g, function($1) { return $1.toUpperCase(); })
// Removes spaces
.replace( / /g, '' );
}
J'essayais de trouver une fonction JavaScript pour camelCase
une chaîne et je voulais m'assurer que les caractères spéciaux seraient supprimés (et j'avais du mal à comprendre ce que certaines des réponses précédentes faisaient). Ceci est basé sur la réponse de c c young, avec des commentaires ajoutés et la suppression des caractères $ peci & l.
Mon ES6 approche:
const camelCase = str => {
let string = str.toLowerCase().replace(/[^A-Za-z0-9]/g, ' ').split(' ')
.reduce((result, Word) => result + capitalize(Word.toLowerCase()))
return string.charAt(0).toLowerCase() + string.slice(1)
}
const capitalize = str => str.charAt(0).toUpperCase() + str.toLowerCase().slice(1)
let baz = 'foo bar'
let camel = camelCase(baz)
console.log(camel) // "fooBar"
camelCase('foo bar') // "fooBar"
camelCase('FOO BAR') // "fooBar"
camelCase('x nN foo bar') // "xNnFooBar"
camelCase('!--foo-¿?-bar--121-**%') // "fooBar121"
Si l'expression rationnelle n'est pas requise, vous pouvez vous intéresser au code suivant que j'ai créé il y a longtemps pour Twinkle :
String.prototype.toUpperCaseFirstChar = function() {
return this.substr( 0, 1 ).toUpperCase() + this.substr( 1 );
}
String.prototype.toLowerCaseFirstChar = function() {
return this.substr( 0, 1 ).toLowerCase() + this.substr( 1 );
}
String.prototype.toUpperCaseEachWord = function( delim ) {
delim = delim ? delim : ' ';
return this.split( delim ).map( function(v) { return v.toUpperCaseFirstChar() } ).join( delim );
}
String.prototype.toLowerCaseEachWord = function( delim ) {
delim = delim ? delim : ' ';
return this.split( delim ).map( function(v) { return v.toLowerCaseFirstChar() } ).join( delim );
}
Je n'ai pas fait de tests de performance et les versions d'expressions rationnelles pourraient être plus rapides ou moins.
Voici un one-line faisant le travail:
const camelCaseIt = string => string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, Word) => string + Word[0].toUpperCase() + Word.slice(1));
Il divise la chaîne en minuscule en fonction de la liste de caractères fournie dans RegExp [.\-_\s]
(en ajoute davantage dans le []!) Et renvoie un tableau Word. Ensuite, il réduit le tableau de chaînes à une chaîne de mots concaténés avec des premières lettres en majuscules. Comme la réduction n'a pas de valeur initiale, elle commencera à mettre en majuscule les premières lettres en commençant par le deuxième mot.
Si vous voulez PascalCase, ajoutez simplement une chaîne vide ,'')
à la méthode de réduction.
return "hello world".toLowerCase().replace(/(?:(^.)|(\s+.))/g, function(match) {
return match.charAt(match.length-1).toUpperCase();
}); // HelloWorld
lodash peut bien faire l'affaire:
var _ = require('lodash');
var result = _.camelCase('toto-ce héros')
// result now contains "totoCeHeros"
Bien que lodash
puisse être une "grande" bibliothèque (environ 4 ko), elle contient de nombreuses fonctions pour lesquelles vous utiliseriez normalement un extrait de code ou vous construisiez vous-même.
Pour obtenirc amelCase
ES5
var camalize = function camalize(str) {
return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, chr)
{
return chr.toUpperCase();
});
}
ES6
var camalize = function camalize(str) {
return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
}
Pour obtenir(C amelSentenceCase ouP ascalCase
var camelSentence = function camelSentence(str) {
return (" " + str).toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, function(match, chr)
{
return chr.toUpperCase();
});
}
Les 14 permutations ci-dessous produisent le même résultat "equipmentClassName".
String.prototype.toCamelCase = function() {
return this.replace(/[^a-z ]/ig, '') // Replace everything but letters and spaces.
.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, // Find non-words, uppercase letters, leading-Word letters, and multiple spaces.
function(match, index) {
return +match === 0 ? "" : match[index === 0 ? 'toLowerCase' : 'toUpperCase']();
});
}
String.toCamelCase = function(str) {
return str.toCamelCase();
}
var testCases = [
"equipment class name",
"equipment class Name",
"equipment Class name",
"equipment Class Name",
"Equipment class name",
"Equipment class Name",
"Equipment Class name",
"Equipment Class Name",
"equipment className",
"equipment ClassName",
"Equipment ClassName",
"equipmentClass name",
"equipmentClass Name",
"EquipmentClass Name"
];
for (var i = 0; i < testCases.length; i++) {
console.log(testCases[i].toCamelCase());
};
vous pouvez utiliser cette solution:
String.prototype.toCamelCase = function(){
return this.replace(/\s(\w)/ig, function(all, letter){return letter.toUpperCase();})
.replace(/(^\w)/, function($1){return $1.toLowerCase()});
};
console.log('Equipment className'.toCamelCase());
suivant l'approche lisible de @ Scott, un peu d'ajustement
// convertit n'importe quelle chaîne en camelCase var toCamelCase = function (str) { retourne str.toLowerCase () .remplacer (/ ['"]/g,' ') remplacer. (//\ W +/g,' ') .remplacer (/ (.)/g, fonction ($ 1) {return $ 1. toUpperCase ();}) .remplace (//g, ''); }
petite réponse de Scott modifiée:
toCamelCase = (string) ->
string
.replace /[\s|_|-](.)/g, ($1) -> $1.toUpperCase()
.replace /[\s|_|-]/g, ''
.replace /^(.)/, ($1) -> $1.toLowerCase()
maintenant, il remplace '-' et '_' aussi.
Il y a ma solution:
const toCamelWord = (Word, idx) =>
idx === 0 ?
Word.toLowerCase() :
Word.charAt(0).toUpperCase() + Word.slice(1).toLowerCase();
const toCamelCase = text =>
text
.split(/[_-\s]+/)
.map(toCamelWord)
.join("");
console.log(toCamelCase('User ID'))
Ceci s'appuie sur la réponse du CMS en supprimant les caractères non alphabétiques y compris underscores, que \w
ne supprime pas.
function toLowerCamelCase(str) {
return str.replace(/[^A-Za-z0-9]/g, ' ').replace(/^\w|[A-Z]|\b\w|\s+/g, function (match, index) {
if (+match === 0 || match === '-' || match === '.' ) {
return ""; // or if (/\s+/.test(match)) for white spaces
}
return index === 0 ? match.toLowerCase() : match.toUpperCase();
});
}
toLowerCamelCase("EquipmentClass name");
toLowerCamelCase("Equipment className");
toLowerCamelCase("equipment class name");
toLowerCamelCase("Equipment Class Name");
toLowerCamelCase("Equipment-Class-Name");
toLowerCamelCase("Equipment_Class_Name");
toLowerCamelCase("Equipment.Class.Name");
toLowerCamelCase("Equipment/Class/Name");
// All output e
J'ai fini par concevoir une solution légèrement plus agressive:
function toCamelCase(str) {
const [first, ...acc] = str.replace(/[^\w\d]/g, ' ').split(/\s+/);
return first.toLowerCase() + acc.map(x => x.charAt(0).toUpperCase()
+ x.slice(1).toLowerCase()).join('');
}
Celui-ci, ci-dessus, supprimera tous les caractères non alphanumériques et les minuscules des mots qui resteraient autrement en majuscules, par ex.
Size (comparative)
=> sizeComparative
GDP (official exchange rate)
=> gdpOfficialExchangeRate
hello
=> hello
Voici ma suggestion:
function toCamelCase(string) {
return `${string}`
.replace(new RegExp(/[-_]+/, 'g'), ' ')
.replace(new RegExp(/[^\w\s]/, 'g'), '')
.replace(
new RegExp(/\s+(.)(\w+)/, 'g'),
($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`
)
.replace(new RegExp(/\s/, 'g'), '')
.replace(new RegExp(/\w/), s => s.toLowerCase());
}
ou
String.prototype.toCamelCase = function() {
return this
.replace(new RegExp(/[-_]+/, 'g'), ' ')
.replace(new RegExp(/[^\w\s]/, 'g'), '')
.replace(
new RegExp(/\s+(.)(\w+)/, 'g'),
($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`
)
.replace(new RegExp(/\s/, 'g'), '')
.replace(new RegExp(/\w/), s => s.toLowerCase());
};
Cas de test:
describe('String to camel case', function() {
it('should return a camel cased string', function() {
chai.assert.equal(toCamelCase('foo bar'), 'fooBar');
chai.assert.equal(toCamelCase('Foo Bar'), 'fooBar');
chai.assert.equal(toCamelCase('fooBar'), 'fooBar');
chai.assert.equal(toCamelCase('FooBar'), 'fooBar');
chai.assert.equal(toCamelCase('--foo-bar--'), 'fooBar');
chai.assert.equal(toCamelCase('__FOO_BAR__'), 'fooBar');
chai.assert.equal(toCamelCase('!--foo-¿?-bar--121-**%'), 'fooBar121');
});
});
function convertStringToCamelCase(str){
return str.split(' ').map(function(item, index){
return index !== 0
? item.charAt(0).toUpperCase() + item.substr(1)
: item.charAt(0).toLowerCase() + item.substr(1);
}).join('');
}
Upper chamel case ("TestString") pour abaisser la casel camel ("testString") sans utiliser l'expression rationnelle (avouons-le, l'expression rationnelle est diabolique):
'TestString'.split('').reduce((t, v, k) => t + (k === 0 ? v.toLowerCase() : v), '');
Cette méthode semble surperformer la plupart des réponses ici, mais elle est un peu compliquée, aucune substitution, aucune regex, simplement la création d'une nouvelle chaîne appelée camelCase.
String.prototype.camelCase = function(){
var newString = '';
var lastEditedIndex;
for (var i = 0; i < this.length; i++){
if(this[i] == ' ' || this[i] == '-' || this[i] == '_'){
newString += this[i+1].toUpperCase();
lastEditedIndex = i+1;
}
else if(lastEditedIndex !== i) newString += this[i].toLowerCase();
}
return newString;
}
Je pense que cela devrait marcher ..
function cammelCase(str){
let arr = str.split(' ');
let words = arr.filter(v=>v!='');
words.forEach((w, i)=>{
words[i] = w.replace(/\w\S*/g, function(txt){
return txt.charAt(0).toUpperCase() + txt.substr(1);
});
});
return words.join('');
}
EDIT: Travaille maintenant dans IE8 sans modifications.
EDIT: J'étais en minorité sur ce qu'est réellement camelCase (minuscule par rapport à majuscule). La communauté dans son ensemble pense que l’affaire des chameaux est une minuscule et que celle de la capitale est Pascal. J'ai créé deux fonctions qui utilisent uniquement des modèles regex. :) Nous utilisons donc un vocabulaire unifié. J'ai changé d'attitude pour correspondre à la majorité.
Je pense que tout ce dont vous avez besoin, c’est d’une seule regex dans les deux cas:
var camel = " THIS is camel case "
camel = $.trim(camel)
.replace(/[^A-Za-z]/g,' ') /* clean up non-letter characters */
.replace(/(.)/g, function(a, l) { return l.toLowerCase(); })
.replace(/(\s.)/g, function(a, l) { return l.toUpperCase(); })
.replace(/[^A-Za-z\u00C0-\u00ff]/g,'');
// Returns "thisIsCamelCase"
ou
var Pascal = " this IS Pascal case "
Pascal = $.trim(Pascal)
.replace(/[^A-Za-z]/g,' ') /* clean up non-letter characters */
.replace(/(.)/g, function(a, l) { return l.toLowerCase(); })
.replace(/(^.|\s.)/g, function(a, l) { return l.toUpperCase(); })
.replace(/[^A-Za-z\u00C0-\u00ff]/g,'');
// Returns "ThisIsPascalCase"
Dans les fonctions: vous remarquerez que, dans ces fonctions, le remplacement remplace tout non-a-z par un espace ou une chaîne vide. Ceci est pour créer des limites de Word pour la capitalisation. "hello-MY # world" -> "HelloMyWorld"
// remove \u00C0-\u00ff] if you do not want the extended letters like é
function toCamelCase(str) {
var retVal = '';
retVal = $.trim(str)
.replace(/[^A-Za-z]/g, ' ') /* clean up non-letter characters */
.replace(/(.)/g, function (a, l) { return l.toLowerCase(); })
.replace(/(\s.)/g, function (a, l) { return l.toUpperCase(); })
.replace(/[^A-Za-z\u00C0-\u00ff]/g, '');
return retVal
}
function toPascalCase(str) {
var retVal = '';
retVal = $.trim(str)
.replace(/[^A-Za-z]/g, ' ') /* clean up non-letter characters */
.replace(/(.)/g, function (a, l) { return l.toLowerCase(); })
.replace(/(^.|\s.)/g, function (a, l) { return l.toUpperCase(); })
.replace(/[^A-Za-z\u00C0-\u00ff]/g, '');
return retVal
}
Remarques:
Prendre plaisir
Je sais que c'est une vieille réponse, mais cela gère à la fois les espaces et _ (lodash)
function toCamelCase(s){
return s
.replace(/_/g", " ")
.replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
.replace(/\s/g, '')
.replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}
console.log(toCamelCase("Hello world");
console.log(toCamelCase("Hello_world");
// Both print "helloWorld"
N'utilisez pas String.prototype.toCamelCase () car String.prototypes est en lecture seule, la plupart des compilateurs js vous avertiront de cette manière.
Comme moi, ceux qui savent que la chaîne contiendra toujours un seul espace peuvent utiliser une approche plus simple:
let name = 'test string';
let pieces = name.split(' ');
pieces = pieces.map((Word, index) => Word.charAt(0)[index===0 ? 'toLowerCase' :'toUpperCase']() + Word.toLowerCase().slice(1));
return pieces.join('');
Bonne journée. :)
Un moyen très simple d'utiliser la bibliothèque turboCommons:
npm install turbocommons-es5
<script src="turbocommons-es5/turbocommons-es5.js"></script>
<script>
var StringUtils = org_turbocommons.StringUtils;
console.log(StringUtils.formatCase('EquipmentClass', StringUtils.FORMAT_LOWER_CAMEL_CASE));
console.log(StringUtils.formatCase('Equipment className', StringUtils.FORMAT_LOWER_CAMEL_CASE));
console.log(StringUtils.formatCase('equipment class name', StringUtils.FORMAT_LOWER_CAMEL_CASE));
console.log(StringUtils.formatCase('Equipment Class Name', StringUtils.FORMAT_LOWER_CAMEL_CASE));
</script>
Vous pouvez également utiliser StringUtils.FORMAT_CAMEL_CASE et StringUtils.FORMAT_UPPER_CAMEL_CASE pour générer les variations de casse de la première lettre.
Plus d'infos ici:
https://turbocommons.org/fr/blog/2018-10-25/convert-string-to-camelcase-javascript-TypeScript-php
L'approche de base consisterait à scinder la chaîne avec une expression régulière correspondant à une majuscule ou à des espaces. Ensuite, vous recolliez les morceaux. Trick traitera des différentes manières dont les divisions de regex sont cassées/bizarres sur les navigateurs. Il y a une bibliothèque ou quelque chose que quelqu'un a écrit pour résoudre ces problèmes; Je vais le chercher.
voici le lien: http://blog.stevenlevithan.com/archives/cross-browser-split
Parce que cette question nécessitait encore une autre réponse ...
J'ai essayé plusieurs des solutions précédentes, et toutes avaient un défaut ou un autre. Certains n'ont pas enlevé la ponctuation; certains ne traitaient pas les cas avec des chiffres; certains ne géraient pas plusieurs ponctuations de suite.
Aucun d’entre eux n’a traité une chaîne comme a1 2b
. Il n'y a pas de convention explicitement définie pour ce cas, mais d'autres questions de type stackoverflow suggèrent de séparer les nombres avec un trait de soulignement.
Je doute que ce soit la réponse la plus performante (trois regex passent au travers de la chaîne plutôt qu'un ou deux), mais tous les tests auxquels je peux penser ont été passés. Pour être honnête, cependant, je ne peux vraiment pas imaginer un cas dans lequel vous ferez tellement de conversions de cas de chameaux que la performance importerait.
(J'ai ajouté ceci en tant que paquet npm }. Il comprend également un paramètre booléen facultatif permettant de renvoyer Pascal Case au lieu de Camel Case.)
const underscoreRegex = /(?:[^\w\s]|_)+/g,
sandwichNumberRegex = /(\d)\s+(?=\d)/g,
camelCaseRegex = /(?:^\s*\w|\b\w|\W+)/g;
String.prototype.toCamelCase = function() {
if (/^\s*_[\s_]*$/g.test(this)) {
return '_';
}
return this.replace(underscoreRegex, ' ')
.replace(sandwichNumberRegex, '$1_')
.replace(camelCaseRegex, function(match, index) {
if (/^\W+$/.test(match)) {
return '';
}
return index == 0 ? match.trimLeft().toLowerCase() : match.toUpperCase();
});
}
Cas de test (Jest)
test('Basic strings', () => {
expect(''.toCamelCase()).toBe('');
expect('A B C'.toCamelCase()).toBe('aBC');
expect('aB c'.toCamelCase()).toBe('aBC');
expect('abc def'.toCamelCase()).toBe('abcDef');
expect('abc__ _ _def'.toCamelCase()).toBe('abcDef');
expect('abc__ _ d_ e _ _fg'.toCamelCase()).toBe('abcDEFg');
});
test('Basic strings with punctuation', () => {
expect(`a'b--d -- f.h`.toCamelCase()).toBe('aBDFH');
expect(`...a...def`.toCamelCase()).toBe('aDef');
});
test('Strings with numbers', () => {
expect('12 3 4 5'.toCamelCase()).toBe('12_3_4_5');
expect('12 3 abc'.toCamelCase()).toBe('12_3Abc');
expect('ab2c'.toCamelCase()).toBe('ab2c');
expect('1abc'.toCamelCase()).toBe('1abc');
expect('1Abc'.toCamelCase()).toBe('1Abc');
expect('abc 2def'.toCamelCase()).toBe('abc2def');
expect('abc-2def'.toCamelCase()).toBe('abc2def');
expect('abc_2def'.toCamelCase()).toBe('abc2def');
expect('abc1_2def'.toCamelCase()).toBe('abc1_2def');
expect('abc1 2def'.toCamelCase()).toBe('abc1_2def');
expect('abc1 2 3def'.toCamelCase()).toBe('abc1_2_3def');
});
test('Oddball cases', () => {
expect('_'.toCamelCase()).toBe('_');
expect('__'.toCamelCase()).toBe('_');
expect('_ _'.toCamelCase()).toBe('_');
expect('\t_ _\n'.toCamelCase()).toBe('_');
expect('_a_'.toCamelCase()).toBe('a');
expect('\''.toCamelCase()).toBe('');
expect(`\tab\tcd`.toCamelCase()).toBe('abCd');
expect(`
ab\tcd\r
-_
|'ef`.toCamelCase()).toBe(`abCdEf`);
});