161

使用正则表达式（我假设）或其他方法，我如何转换如下内容：

marker-image或my-example-setting到markerImage或myExampleSetting。

我正在考虑只是拆分，-然后将该连字符 +1 的索引转换为大写。但它看起来很脏，希望对正则表达式有一些帮助，可以使代码更干净。

没有jQuery...

4

16 回答 16

295

尝试这个：

var camelCased = myString.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });

正则表达式将匹配-iinmarker-image并仅捕获i. 然后在回调函数中将其大写并替换。

于 2011-07-12T07:49:38.330 回答
52

这是Lodash提供的很棒的实用程序之一，如果您开明并且将其包含在您的项目中。

var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'
于 2015-07-07T13:21:41.947 回答
17

您可以获取连字符和下一个字符并将其替换为该字符的大写版本：

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});
于 2011-07-12T07:49:42.010 回答
14

这是我的 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);
}
于 2013-09-01T09:22:01.643 回答
4

这对我来说并不可怕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
于 2017-07-14T19:38:23.323 回答
3

将String'replace()方法与正则表达式文字和替换函数一起使用。

例如：

'uno-due-tre'.replace(/-./g, (m) => m[1].toUpperCase()) // --> 'unoDueTre'

解释：

  • 'uno-due-tre'是要转换为驼峰式大小写的（输入）字符串。
  • /-./g（传递给的第一个参数replace()）是一个正则表达式文字。
    • （'-.'斜线之间）是一种模式。它匹配单个'-'字符后跟任何单个字符。所以对于字符串'uno-due-tre'，模式'-.'匹配'-d'和'-t'。
    • （'g'在结束斜线之后）是一个标志。它代表“全局”并告诉replace()执行全局搜索和替换，即替换所有匹配项，而不仅仅是第一个匹配项。
  • (m) => m[1].toUpperCase()（传递给 的第二个参数replace()）是替换函数。每场比赛调用一次。每个匹配的子字符串都被此函数返回的字符串替换。m（此函数的第一个参数）表示匹配的子字符串。此函数返回m大写的第二个字符。所以当m是'-d'，这个函数返回'D'。
  • 'unoDueTre'是由 . 返回的新（输出）字符串replace()。输入字符串保持不变。
于 2021-01-22T03:52:22.700 回答
2 
// Turn the dash separated variable name into camelCase.
str = str.replace(/\b-([a-z])/g, (_, char) => char.toUpperCase());
于 2014-09-15T06:13:34.017 回答
2

这是我的实现（只是为了弄脏手）

/**
 * 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('');
}
于 2018-10-01T17:45:49.657 回答
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
于 2014-03-05T15:08:24.253 回答
1

你可以使用NPM的驼峰式。

npm install --save camelcase

const camelCase = require('camelcase');
camelCase('marker-image'); // => 'markerImage';
camelCase('my-example-setting'); // => 'myExampleSetting';
于 2019-08-06T18:16:02.847 回答
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
于 2015-06-17T17:25:05.520 回答
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)}`);

于 2020-06-11T13:47:05.093 回答
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');
于 2017-01-11T10:32:24.227 回答
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('');

}
于 2021-03-22T08:08:28.890 回答
0

这个简单的解决方案考虑了这些边缘情况。

  • 一个字
  • 单个字母
  • 没有连字符
  • 超过 1 个连字符

const toCamelCase = (text) => text.replace(/(.)([^-|$]*)[-]*/g, (_,letter,word) => `${letter.toUpperCase()}${word.toLowerCase()}`)

于 2021-09-09T19:33:46.100 回答
0

只是一个带有标志、for循环且没有正则表达式的版本：

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;
}
于 2018-08-30T18:30:25.090 回答