使用正则表达式(我假设)或其他方法,我该如何转换:
marker-image
或my-example-setting
至markerImage
或myExampleSetting
。
我当时正在考虑先拆分,-
然后将该hypen +1的索引转换为大写。但是它看起来很脏,并且希望对正则表达式有所帮助,以使代码更整洁。
没有jQuery ...
试试这个:
var camelCased = myString.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
正则表达式将匹配-i
inmarker-image
并仅捕获i
。然后在回调函数中将其大写并替换。
如果您受到启发并将其包含在项目中,这是Lodash提供的出色实用程序之一。
var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'
您可以获取连字符和下一个字符,然后将其替换为字符的大写版本:
var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
return w.toUpperCase();
});
这是我的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);
};
})();
它处理以下所有边缘情况:
- 默认情况下照顾下划线和连字符(可使用第二个参数配置)
- 具有unicode字符的字符串
- 以连字符或下划线结尾的字符串
- 带有连续连字符或下划线的字符串
这是实时测试的链接:http : //jsfiddle.net/avKzf/2/
以下是测试结果:
- 输入:“ ab-cd-ef”,结果:“ abCdEf”
- 输入:“ ab-cd-ef-”,结果:“ abCdEf”
- 输入:“ ab-cd-ef--”,结果:“ abCdEf”
- 输入:“ ab-cd--ef--”,结果:“ abCdEf”
- 输入:“-ab-cd--ef--”,结果:“ AbCdEf”
- 输入:“-ab-cd -__- ef--”,结果:“ AbCdEf”
请注意,以定界符开头的字符串将以大写字母开头。如果那不是您期望的,则可以始终使用lcfirst。如果需要的话,这是我的lcfirst:
function lcfirst(str) {
return str && str.charAt(0).toLowerCase() + str.substring(1);
}
这不会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
这是另一个选项,在这里结合了几个答案并使它成为字符串的方法:
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
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
您可以使用NPM中的camelcase。
npm install --save camelcase
const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';
另取。
用于...
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
也可以将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');
只是一个带有标志的版本,用于循环而没有正则表达式:
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;
}
这是我的实现(只是使双手变脏)
/**
* 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('');
}
如果您允许在字符串中使用数字,请使用此选项。
显然,以数字开头的部分不会大写,但这在某些情况下可能有用。
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)}`);
本文地址:http://javascript.askforanswer.com/jianglianzifuzhuanhuanweituofengshidaxiaoxiecamelcase.html
文章标签:camelcasing , javascript , regex
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:camelcasing , javascript , regex
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!