使用正则表达式(我假设)或其他一些方法,我如何转换像:
marker-image
或my-example-setting
至markerImage
或myExampleSetting
。
我正在考虑按-
拆分然后将该超级+1的索引转换为大写。但它看起来很脏,并希望得到一些可以使代码更清晰的正则表达式的帮助。
没有 jQuery ......
答案 0 :(得分:218)
试试这个:
var camelCased = myString.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
正则表达式将与-i
中的marker-image
匹配,并仅捕获i
。然后在回调函数中将其大写并替换。
答案 1 :(得分:35)
这是Lodash提供的最好的工具之一,如果你开悟并将其包含在你的项目中。
var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'
答案 2 :(得分:14)
您可以获取连字符和下一个字符,并将其替换为字符的大写字母:
var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
return w.toUpperCase();
});
答案 3 :(得分:12)
这是我的camelCase函数版本:
var camelCase = (function () {
var DEFAULT_REGEX = /[-_]+(.)?/g;
function toUpper(match, group1) {
return group1 ? group1.toUpperCase() : '';
}
return function (str, delimiters) {
return str.replace(delimiters ? new RegExp('[' + delimiters + ']+(.)?', 'g') : DEFAULT_REGEX, toUpper);
};
})();
它处理以下所有边缘情况:
以下是实时测试的链接:http://jsfiddle.net/avKzf/2/
以下是测试结果:
请注意,以分隔符开头的字符串将在开头处生成一个大写字母。 如果这不是您所期望的,您可以始终使用lcfirst。 如果你需要,这是我的第一个:
function lcfirst(str) {
return str && str.charAt(0).toLowerCase() + str.substring(1);
}
答案 4 :(得分:2)
这对我来说不是RegExp
的尖叫。我个人试图避免正则表达式,当简单的字符串和数组方法就足够了:
let upFirst = word =>
word[0].toUpperCase() + word.toLowerCase().slice(1)
let camelize = text => {
let words = text.split(/[-_]/g) // ok one simple regexp.
return words[0].toLowerCase() + words.slice(1).map(upFirst)
}
camelize('marker-image') // markerImage
答案 5 :(得分:1)
这是另一个选项,它在这里结合了几个答案并使其成为字符串上的方法:
if (typeof String.prototype.toCamel !== 'function') {
String.prototype.toCamel = function(){
return this.replace(/[-_]([a-z])/g, function (g) { return g[1].toUpperCase(); })
};
}
像这样使用:
'quick_brown'.toCamel(); // quickBrown
'quick-brown'.toCamel(); // quickBrown
答案 6 :(得分:1)
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
答案 7 :(得分:0)
另一种观点。
在...时使用
var string = "hyphen-delimited-to-camel-case"
or
var string = "snake_case_to_camel_case"
function toCamelCase( string ){
return string.toLowerCase().replace(/(_|-)([a-z])/g, toUpperCase );
}
function toUpperCase( string ){
return string[1].toUpperCase();
}
Output: hyphenDelimitedToCamelCase
答案 8 :(得分:0)
也可以使用indexOf和该任务的递归。
input some-foo_sd_dsd-weqe
output someFooSdDsdWeqe
比较:::测量两个不同脚本的执行时间:
$ node camelCased.js
someFooSdDsdWeqe
test1: 2.986ms
someFooSdDsdWeqe
test2: 0.231ms
代码:
console.time('test1');
function camelCased (str) {
function check(symb){
let idxOf = str.indexOf(symb);
if (idxOf === -1) {
return str;
}
let letter = str[idxOf+1].toUpperCase();
str = str.replace(str.substring(idxOf+1,idxOf+2), '');
str = str.split(symb).join(idxOf !== -1 ? letter : '');
return camelCased(str);
}
return check('_') && check('-');
}
console.log(camelCased ('some-foo_sd_dsd-weqe'));
console.timeEnd('test1');
console.time('test2');
function camelCased (myString){
return myString.replace(/(-|\_)([a-z])/g, function (g) { return g[1].toUpperCase(); });
}
console.log(camelCased ('some-foo_sd_dsd-weqe'));
console.timeEnd('test2');
答案 9 :(得分:0)
只是带有标志,用于循环且没有正则表达式的版本:
function camelCase(dash) {
var camel = false;
var str = dash;
var camelString = '';
for(var i = 0; i < str.length; i++){
if(str.charAt(i) === '-'){
camel = true;
} else if(camel) {
camelString += str.charAt(i).toUpperCase();
camel = false;
} else {
camelString += str.charAt(i);
}
}
return camelString;
}
答案 10 :(得分:0)
这是我的实现方式(只是使双手变脏)
/**
* kebab-case to UpperCamelCase
* @param {String} string
* @return {String}
*/
function toUpperCamelCase(string) {
return string
.toLowerCase()
.split('-')
.map(it => it.charAt(0).toUpperCase() + it.substr(1))
.join('');
}
答案 11 :(得分:0)
您可以在NPM中使用camelcase
。
npm install --save camelcase
const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';
答案 12 :(得分:0)
如果您在字符串中允许数字,请使用此选项。
显然,以数字开头的部分不会大写,但这在某些情况下可能有用。
function fromHyphenToCamelCase(str) {
return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase())
}
function fromHyphenToCamelCase(str) {
return str.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase())
}
const str1 = "category-123";
const str2 = "111-222";
const str3 = "a1a-b2b";
const str4 = "aaa-2bb";
console.log(`${str1} => ${fromHyphenToCamelCase(str1)}`);
console.log(`${str2} => ${fromHyphenToCamelCase(str2)}`);
console.log(`${str3} => ${fromHyphenToCamelCase(str3)}`);
console.log(`${str4} => ${fromHyphenToCamelCase(str4)}`);
答案 13 :(得分:0)
将 String
的 replace()
方法与 regular expression 文字和替换函数一起使用。
例如:
'uno-due-tre'.replace(/-./g, (m) => m[1].toUpperCase()) // --> 'unoDueTre'
说明:
'uno-due-tre'
是您要转换为驼峰式大小写的(输入)字符串。/-./g
(传递给 replace()
的第一个参数)是一个 regular expression 文字。
'-.'
(斜线之间)是一种模式。它匹配单个 '-'
字符后跟任何单个字符。因此对于字符串 'uno-due-tre'
,模式 '-.'
匹配 '-d'
和 '-t'
。'g'
(在斜杠之后)是一个标志。它代表“全局”并告诉 replace()
执行全局搜索和替换,即替换所有匹配项,而不仅仅是第一个。(m) => m[1].toUpperCase()
(传递给 replace()
的第二个参数)是替换函数。每场比赛调用一次。每个匹配的子字符串都被此函数返回的字符串替换。 m
(此函数的第一个参数)表示匹配的子字符串。此函数以大写形式返回 m
的第二个字符。因此,当 m
为 '-d'
时,此函数返回 'D'
。'unoDueTre'
是 replace()
返回的新(输出)字符串。输入字符串保持不变。答案 14 :(得分:0)
你也可以使用字符串和数组方法;我使用修剪来避免任何空格。
const properCamel = (str) =>{
const lowerTrim = str.trim().toLowerCase();
const array = lowerTrim.split('-');
const firstWord = array.shift();
const caps = array.map(word=>{
return word[0].toUpperCase() + word.slice(1);
})
caps.unshift(firstWord)
return caps.join('');
}