【问题标题】:Convert dash-separated string to camelCase?将破折号分隔的字符串转换为驼峰式?
【发布时间】:2012-05-12 14:36:12
【问题描述】:

例如,假设我总是有一个由“-”分隔的字符串。有没有办法改造

今天是美好的一天

今天是伟大的一天

使用正则表达式?

【问题讨论】:

  • 提示:在 JavaScript 中,函数可以作为“替换”参数提供。该函数将针对每个匹配进行评估(以“全局匹配”模式运行),并且可以包含任意代码。
  • 对于"proper camel-casing" 在这里的含义似乎有些混淆。请记住,正则表达式非常特殊;考虑这些输入(以及输出应该是什么):foo-barFoo-BarFOO-BARFoO-bAr-foo--bar- 等。

标签: javascript regex


【解决方案1】:

编辑以支持非小写输入和Unicode)

function camelCase(input) { 
    return input.toLowerCase().replace(/-(.)/g, function(match, group1) {
        return group1.toUpperCase();
    });
}

在 MDN 的 "Specifying a function as a parameter" 文档中查看有关“替换回调”的更多信息。

回调函数的第一个参数是完全匹配,后续参数是正则表达式中带括号的组(在这种情况下,连字符后面的字符)。

【讨论】:

  • 关闭,这不会在 Foo-Bar 上使用驼峰命名法。
  • @pst 肯定会的。虽然它在politische-ökonomie 上失败了,因为\w 不支持Unicode。 Javascript RegExp 似乎也不支持\p{Letter}\p{Letter&},因此如果您希望它正常工作,您应该考虑使用/-(.)/g 作为正则表达式。
  • @hobbs 它将以 CapWords (FooBar) 结尾。关于正则表达式的事情是……非常精确。 (实际上,从 wiki 定义看来,FooBarfooBarboth 都可以被认为是驼峰式/驼峰式...)
  • @hobbs:有趣的一点。使用. 而不是\w 并没有真正伤害任何东西(我认为),因为无论如何toUpperCase 都不会影响非字母。已编辑。
【解决方案2】:

使用reduce的另一种方法:

function camelCase(str) {
  return str
    .split('-')
    .reduce((a, b) => a + b.charAt(0).toUpperCase() + b.slice(1));
}

【讨论】:

  • 比所有基于正则表达式的实现都要快得多。如果您首先有结构良好的字符串,并且需要快速(例如转换许多键),那么这非常有用......如果您有来自可能是一团糟的人的数据,请使用类似的正则表达式实现lodash。
【解决方案3】:

您可以匹配每个破折号后的单词字符 (-) 或字符串的开头,或者您可以通过匹配每个单词边界后的单词字符 (\b) 来简化:

function camelCase(s) {
  return (s||'').toLowerCase().replace(/(\b|-)\w/g, function(m) {
    return m.toUpperCase().replace(/-/,'');
  });
}
camelCase('foo-bar'); // => 'FooBar'
camelCase('FOo-BaR-gAH'); // => 'FooBarGah'

【讨论】:

  • camelCase 中,第一个单词的首字母小写。你解释的是PascalCase。
【解决方案4】:

Here's a demo

var test = 'It-is-a-great-day-today';

function camelize(str) {
    return str[0].toLowerCase() + str.replace(/-([a-z])/g, function(a, b) {
        return b.toUpperCase();
    }).slice(1);
}

console.log(camelize(test));

【讨论】:

  • 不过,Foo-Bar 上不会出现驼峰式大小写。
  • @apsillers 我不是在开玩笑。是的,它明确要求Convert string to camelCase with regular expression?(见en.wikipedia.org/wiki/CamelCase
  • 感谢您的链接;我一直认为它是 camelCase 和 CapWords ......但我猜 CamelCase 也适用......
【解决方案5】:

这也应该有效:

function camelCase(str) {
  return str.replace(/^.|-./g, function(letter, index) {
    return index == 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase();
  });
}

恕我直言,它的效率更高一些,因为我们不会先将整个输入字符串转换为小写,然后在需要时再转换为大写。此函数只将第一个字母转换为小写,然后将连字符- 之后的每个字符转换为大写。

【讨论】:

    【解决方案6】:

    http://jsfiddle.net/54ZcM/

    function camelCase(string) {
        return string.toLowerCase().replace(/(\-[a-zA-Z])/g, function($1) {
            return $1.toUpperCase().replace('-','');
        })
    }
    
    alert(camelCase('fOo-BarBA-fo'));
    

    【讨论】:

    • 不需要匹配 A-Z,因为您已经使用 string.toLowerCase() 将字符串小写
    【解决方案7】:

    我知道这个问题有点老了,但是,

    这是我的 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);
    }
    

    【讨论】:

      【解决方案8】:

      这很好用,但有人可能会清理它。

      var toCamelCase = function(str) {
              // Replace special characters with a space
              str = str.replace(/[^a-zA-Z0-9 ]/g, " ");
              // put a space before an uppercase letter
              str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');
              // Lower case first character and some other stuff that I don't understand
              str = str.replace(/([^a-zA-Z0-9 ])|^[0-9]+/g, '').trim().toLowerCase();
              // uppercase characters preceded by a space or number
              str = str.replace(/([ 0-9]+)([a-zA-Z])/g, function(a,b,c) {
                  return b.trim() + c.toUpperCase();
              });
              return str;
      };
      
      console.log(toCamelCase('hyphen~name~ format'));
      console.log(toCamelCase('hyphen.name.format'));
      console.log(toCamelCase('hyphen-name-format'));
      console.log(toCamelCase('Hyphen-Dame-Gormat'));
      console.log(toCamelCase('EquipmentClass name'));
      console.log(toCamelCase('Equipment className'));
      console.log(toCamelCase('equipment class name'));
      console.log(toCamelCase(' e    Equipment Class Name'));
      console.log(toCamelCase('under9score_name_format'));
      console.log(toCamelCase('Enderscore_name_format'));
      console.log(toCamelCase('EnderscoreBameFormat'));
      console.log(toCamelCase('_EnderscoreBameFormat'));
      

      http://jsbin.com/yageqi/1/edit?js,console

      【讨论】:

        【解决方案9】:
        'it-is-a-great-day-today'.split('-').map(function(x,i){
            return (i?x[0].toUpperCase():x[0]) + x.slice(1).toLowerCase()
        }).join('')
        

        结果:

        'itIsAGreatDayToday'
        

        或者,.match(/\w+/g) 而不是 .split('-') - 取决于您想要在“this--is-a-test”等边缘情况下执行的操作。

        【讨论】:

          【解决方案10】:
          var string = "it-is-a-great-day-today";
          or
          var string = "it_is_a_great_day_today";
          
          var regex = /(_|-)([a-z])/g;
          
          string.toLowerCase().replace(regex, toCamelCase );
          
          function toCamelCase( string ){
            return string[1].toUpperCase();
          }
          
          Output: "itIsAGreatDayToday";
          

          【讨论】:

            【解决方案11】:

            这是你可以用来测试的 jsfiddle http://jsfiddle.net/5n84w/2/

            ```

            /**
             * Function to convert any string to camelCase
             * var regex = 'chetan-Ankola###.com---m13ok#-#alo(*finding!R%S#%-GFF'; 
             * Where [-_ .] is the seperator, you can add eg: '@' too
             * + is to handle repetition of seperator           
             * ? is to take care of preceeding token 
             * match nov(ember)? matches nov and november
             */
            var camelCaser = function (str) {
                var camelCased = str.replace(/[-_ .]+(.)?/g, function (match, p) {
                    if (p) {
                        return p.toUpperCase();
                    }
                    return '';
                }).replace(/[^\w]/gi, '');
                return camelCased;
            };
            

            ```

            【讨论】:

            • 这根本不起作用。这个 PascalCases,不是骆驼案。
            【解决方案12】:

            伙计们,最好这样做,

            function camelCase(data) {
                var tmp;
                if (data && typeof data === 'object') {
                    forEach(data, function (value, key) {
                        var tmpvalue = camelCase(key);
                        tmp[tmpvalue] = value;
                    });
                    return tmp;
                } else {
                    return data.toLowerCase().replace(/(\_\w)/g, function (m) { return m[1].toUpperCase() }).replace(/(\-\w)/g, function (m) { return m[1].toUpperCase(); });
                }
            }
            
            console.log(camelCase("SucCCCess_dfds_dsqsdqs-dsdqs-dqsdqs"));

            在任何情况下都能完美运行。

            【讨论】:

              【解决方案13】:
              $scope.toCamelCase = function(arg){
                  var arg = arg.toLowerCase();
                  var arr = arg.split("");
                  arr[0] = arr[0].toUpperCase();
                  return arr.join("");
              };
              

              【讨论】:

              • 这只是将第一个字母大写,不是驼峰式。
              猜你喜欢
              • 2015-07-07
              • 2012-01-20
              • 2018-05-29
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2011-10-03
              相关资源
              最近更新 更多