将驼峰命名法转换为易读的字符串？

Question

有没有一个正则表达式或函数，可以将驼峰命名、CSS 和下划线格式转换为人类可读的格式？目前不需要支持非人类。对不起外星人 :(

示例:

helloWorld -> "Hello World"
hello-world -> "Hello World"
hello_world -> "Hello World"

- 1.21 gigawatts

---

驼峰命名法不易读懂吗？ - nderscore

Answer 1

按非单词字符拆分；大写首字母；合并：

function toCapitalizedWords(name) {
    var words = name.match(/[A-Za-z][a-z]*/g) || [];

    return words.map(capitalize).join(" ");
}

function capitalize(word) {
    return word.charAt(0).toUpperCase() + word.substring(1);
}

- Ry-

---

这将把 "test.hello" 改为 "Test Hello"。对于那些只想要大小写更改、下划线和连字符的人，可以使用以下正则表达式：/[A-Za-z][^_\-A-Z]*/g。 - Dave

JavaScript真的需要针对字符串的内置方法来解决这个问题。虽然以下代码能够正常运行，但很丑陋且需要大脑思考去理解一些简单的东西。 - ICW

@YungGun 人们实际上有多经常想做这件事...？ - Ry-

同时，这个正则表达式/[A-Za-z][a-z]*|[0-9]+/g不能处理数字。它将返回'addressLine1' => 'Address Line 1'。 - Dan F.

Answer 2

使用正则表达式提取所有单词，将它们的首字母大写，然后用空格连接起来。

正则表达式示例:

/^[a-z]+|[A-Z][a-z]*/g

/   ^[a-z]+      // 1 or more lowercase letters at the beginning of the string
    |            // OR
    [A-Z][a-z]*  // a capital letter followed by zero or more lowercase letters
/g               // global, match all instances  

示例函数：

var camelCaseToWords = function(str){
    return str.match(/^[a-z]+|[A-Z][a-z]*/g).map(function(x){
        return x[0].toUpperCase() + x.substr(1).toLowerCase();
    }).join(' ');
};

camelCaseToWords('camelCaseString');
// Camel Case String

camelCaseToWords('thisIsATest');
// This Is A Test

- nderscore

Answer 3

这是基于Ricks C示例代码的ActionScript版本。对于JavaScript版本，需要取消强类型声明。例如，将var value:String 改为 var value。基本上，删除任何以分号、:String、:int等开头的声明即可。

/**
 * Changes camel case to a human readable format. So helloWorld, hello-world and hello_world becomes "Hello World". 
 * */
public static function prettifyCamelCase(value:String=""):String {
    var output:String = "";
    var len:int = value.length;
    var char:String;

    for (var i:int;i<len;i++) {
        char = value.charAt(i);

        if (i==0) {
            output += char.toUpperCase();
        }
        else if (char !== char.toLowerCase() && char === char.toUpperCase()) {
            output += " " + char;
        }
        else if (char == "-" || char == "_") {
            output += " ";
        }
        else {
            output += char;
        }
    }

    return output;
}

JavaScript版本：

/**
 * Changes camel case to a human readable format. So helloWorld, hello-world and hello_world becomes "Hello World". 
 * */
function prettifyCamelCase(str) {
    var output = "";
    var len = str.length;
    var char;

    for (var i=0 ; i<len ; i++) {
        char = str.charAt(i);

        if (i==0) {
            output += char.toUpperCase();
        }
        else if (char !== char.toLowerCase() && char === char.toUpperCase()) {
            output += " " + char;
        }
        else if (char == "-" || char == "_") {
            output += " ";
        }
        else {
            output += char;
        }
    }

    return output;
}

- 1.21 gigawatts

---

var i:int 需要加上 = 0 吗？ - Ry-

不，当声明时整数被初始化为0。哎呀，在JS中是这样的。我添加了一个JS示例。 - 1.21 gigawatts

Answer 4

我不知道是否已经有内置的方法可以做到这一点，但你可以遍历字符串，并且每当你看到想要分割的字符时就进行分割。

在你的情况下，可以使用以下代码：

    my_str = 'helloWorld';
    returnString = '';
    for(var i = 0; i < my_str.length; i++) {
        if(i == 0) {
            returnString += (my_str[i] + 32); // capitalize the first character
        }
        else if(my_str[i] > 'A' || my_str[i] < 'Z') {
            returnString += ' ' + my_str[i]; // add a space
        }
        else if(my_str[i] == '-' || my_str[i] == '_') {
            returnString += ' ';
        }
        else {
            returnString += my_string[i];
        }
    }

   return returnString;

编辑：

在收到众多评论后，我意识到我上传了一些错误的代码：P

这是一个经过测试的版本：

my_str = 'helloWorld';

function readable(str) {
    // and this was a mistake about javascript/actionscript being able to capitalize
    // by adding 32
    returnString = str[0].toUpperCase();

    for(var i = 1; i < str.length; i++) {
        // my mistakes here were that it needs to be between BOTH 'A' and 'Z' inclusive
        if(str[i] >= 'A' && str[i] <= 'Z') {
            returnString += ' ' + str[i];
        }
        else if(str[i] == '-' || str[i] == '_') {
            returnString += ' ';
        }
        else {
            returnString += str[i];
        }
    }

    return returnString;
}

- Rick

---

干得好，但 JavaScript 不是 C。 - georg

my_str[i] > 'A' 和 my_str[i] < 'Z' 应该改为 >= 和 <=。 - nderscore

我会给你说，JavaScript 可能提供了一种更好的编码方式，但这仍然可以表达重点。话虽如此，回过头看，在 JavaScript 中 my_str[i] + 32 可能只会将 32 添加到字符上。 - Rick

我现在得到的结果是“H e l l o W o r l d”。 - 1.21 gigawatts

我已经添加了我从你的示例中转换的JS。 - 1.21 gigawatts

Answer 5

如果可以使用库，那么 Lodash 库的 startCase 或 lowerCase 可能会有用：

https://lodash.com/docs/#startCase

https://lodash.com/docs/#lowerCase

- Bruno Medeiros

Answer 6

您可以使用替换函数来实现String.replace，例如：

function capitalize(s) {
    return s[0].toUpperCase() + s.slice(1);
}

function replacer1(match, p1, p2, p3, offset, s) {
    return p1 + capitalize(p2) + ' ' + p3;
}

var s1 = "helloWorld";
var r1 = s1.replace(/(^|[^a-z])([a-z]+)([A-Z])/, replacer1);
console.log(r1);

hello-world和hello_world的作用类似。

请查看JSFiddle

- Olaf Dietsche

Answer 7

使用正则表达式替换函数的非优雅单行代码。

替换1-将第一个字母大写并删除 _-

替换2-在小写字母和大写字母之间添加空格

var titleCase = s => s
  .replace(/(^|[_-])([a-z])/g, (a, b, c) => c.toUpperCase())
  .replace(/([a-z])([A-Z])/g, (a, b, c) => `${b} ${c}`);

console.log(titleCase("helloWorld"));
console.log(titleCase("hello-world"));
console.log(titleCase("hello_world"));

- john nowlin

Answer 8

  const result = _.chain("hello-world")
        .snakeCase()
        .split("_")
        .map(w => _.capitalize(w))
        .join(" ")
        .value()

  console.log(result)

<script src="
            https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
            "></script>

- Gregory Bluvshteyn