javascript - 将 camelCaseWords 从数据属性转换为“Camel Case Words”

Question

我有一组带有自定义 HTML5 数据属性的链接，如下所示：data-test="justExample"

<a href="#" data-test="somethingSpecial">
    This should output "Something Special"
</a>

我想返回这个值"Just Example"而不是 " justExample"。

随意编辑我创建的这个 jsfiddle 。

Answer 1

$('a').click(function() {
    var str = $(this).data('test'); // get the concated string
    var arr = str.split(""); // Convert the string to array
    for (var i = arr.length - 1; i >= 0; i--) {  // iterate over the characters 
        if (arr[i].match(/[A-Z]/))  // if the char is uppercase
            arr.splice(i, 0, " "); // add a space before it
    }

    arr[0] = arr[0].toUpperCase();    // upper the first char.
    var splitedString = arr.join(""); // convert the array to string
    alert(splitedString); // alert the string.
});​

现场演示

Answer 2

像这样的东西？

$('a').click(function(){
  var input = $(this).data('test'),
      output = input.slice(0, 1).toUpperCase() + input.slice(1).replace(/[A-Z][a-z]/, ' $&');
  alert(output);
});​

编写一个通用函数将骆驼大小写转换为整洁的字符串可能会更好，但是上面的示例演示在这里工作：http: //jsfiddle.net/rjzaworski/mFbHK/

Answer 3

这是一个简短的版本：

$('a').click(function(){
  var t = $(this).data('test');
  alert(t.replace( /^[a-z]|[a-z][A-Z]/g, function(s){
    return s.length==1 ? s.toUpperCase() : s.replace(/^./,'$& ');
  });
});

或者，包装成一个更可重用的函数，该函数也可以自我记录您的意图：

$('a').click(function(){
  alert(deCamel($(this).data('test')));
});

function deCamel(str){
  return str.replace( /^[a-z]|[a-z][A-Z]/g, function(s){
    return s.length==1 ? s.toUpperCase() : s.replace(/^./,'$& ');
  });
}