将连字符转换为驼峰大小写(camelCase)

Question

使用正则表达式(我假设)或其他一些方法,我怎么能转换像:

marker-image或者my-example-setting到markerImage或myExampleSetting.

我正在考虑分裂,-然后将那个超级+1的索引转换为大写.但它似乎很脏,并希望得到一些可以使代码更清晰的正则表达式的帮助.

没有 jQuery ......

Answer 1

试试这个:

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

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

Answer 2

这是Lodash提供的最好的工具之一,如果你开悟并将其包含在你的项目中.

var str = 'my-hyphen-string';
str = _.camelCase(str);
// results in 'myHyphenString'

Answer 3

您可以获取hypen和下一个字符,并将其替换为字符的大写字母:

var str="marker-image-test";
str.replace(/-([a-z])/g, function (m, w) {
    return w.toUpperCase();
});

Answer 4

这是我的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.如果你需要,这是我的第一个:

function lcfirst(str) {
    return str && str.charAt(0).toLowerCase() + str.substring(1);
}

Answer 5

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

例如：

'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()。输入字符串保持不变。