Question

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

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

我想将此值返回为"Just Example"而不是“justExample"。

随时编辑我创建的this 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.
});

LIVE DEMO

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

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

3 个答案: