javascript - camelCaseWordsをデータ属性から「CamelCaseWords」に変換します

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(/^./,'$& ');
  });
}