将下划线替换为空格并将单词首字母大写

Question

我试图创建一种方式，将包含小写字母和下划线的文本转换为没有下划线并且每个单词的第一个字母大写的文本。

例如：

options_page = Options Page

在这个页面：如何在JavaScript中使所有单词的首字母大写？

我找到了这个正则表达式：

key = key.replace(/(?:_| |\b)(\w)/g, function(key, p1) { return p1.toUpperCase()});

这段代码可以完成除了用空格替换下划线的操作。因为我对正则表达式不是很熟悉，所以我并没有尝试过任何改动。

请问如何调整这个正则表达式来实现下划线替换为空格的功能？

- Lee Loftiss

---

对于那些使用lodash的人来说，有一个名为startCase的函数可以实现这个功能。 - oluckyman

Answer 1

这应该就是解决方法：

function humanize(str) {
  var i, frags = str.split('_');
  for (i=0; i<frags.length; i++) {
    frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
  }
  return frags.join(' ');
}


console.log(humanize('humpdey_dumpdey'));
// > Humpdey Dumpdey

repl

http://repl.it/OnE

Fiddle:

http://jsfiddle.net/marionebl/nf4NG/

jsPerf:

测试数据最全的网站: http://jsperf.com/string-transformations

包括所有版本和_.str的测试数据: http://jsperf.com/string-transformations/3

- marionebl

---

我同意您关于代码大小的看法，但根据我的测试，在大多数浏览器中str.split速度更快。 - marionebl

当将代码压缩并定义为function humanize时，代码大小为131字节与111字节相比。 - marionebl

有趣的结果！我需要修改我的做法。 - Hubert OG

比原来快20倍。很不错。 - Patrick

即可读/理解的代码，比正则表达式更快。谁能想到这是可能的呢？ - rmcsharry

如果您还需要将所有字母转换为大写，可以将以下内容添加到您的for循环中： frags[i] = frags[i].toLowerCase() - Ac Hybl

Answer 2

自 Lodash 3.1.0 开始，有一个 _.startCase([string='']) 方法，将任何大小写格式的字符串转换为首字母大写的单词（即 Start Case）。

_.startCase('hello_world'); // returns 'Hello World'
_.startCase('hello-world'); // returns 'Hello World'
_.startCase('hello world'); // returns 'Hello World'

Lodash 的字符串部分中还有其他有用的方法。在此处阅读文档。

- Arian Acosta

---

附注：如果你只想在React中导入这个函数而不是整个库，你可以在文件顶部使用import startCase from 'lodash/startCase'来代替导入整个库，如果你只是用它做这一件事的话。 - jimmyplaysdrums

Answer 3

这是两个不同的任务，因此最好的解决方案是使用两个不同的正则表达式：

key = key.replace(/_/g, ' ').replace(/(?: |\b)(\w)/g, function(key) { return key.toUpperCase()});

为确保所有大写字母都被处理，可以在第一个.replace之前添加.toLowerCase():

console.log('TESTING_WORD'.toLowerCase().replace(/_/g, ' ')
.replace(/(?: |\b)(\w)/g, function(key, p1) {
    return key.toUpperCase();    
}));

- Hubert OG

---

你可以从第二个正则表达式中删除下划线，因为它们都已被删除。 - Barmar

谢谢你的回答。不幸的是，它现在产生的结果和之前一样；contact_details = ContactDetails; 它没有在里面加上空格。 - Lee Loftiss

对，我没有注意到第二个正则表达式也删除了空格。我已经编辑了代码来改变这个功能。现在它按预期工作，你可以在这里检查。 - Hubert OG

为了使其更好，您可以在第一个key.replace之前添加key.toLowerCase()，以确保即使所有大写单词也被处理。 - Shinjo

Answer 4

只需要添加.replace('_',' ')，就像这样：

function toCamel(string){
  return string.replace(/(?:_| |\b)(\w)/g, function($1){return $1.toUpperCase().replace('_',' ');});
}

- Sagar Kamble

---

嗨，如何使所有字母变成大写？也许你可以提供两个版本，一个是首字母大写，另一个全部都是大写字母。 - mastersuse

Answer 5

另一种选择：

camel = "options_page".replace(/(^|_)(\w)/g, function ($0, $1, $2) {
  return ($1 && ' ') + $2.toUpperCase();
});
console.log(camel);

正则表达式：

(^|_)   beginning of the input OR "_" ($1)
(\w)    a word character (short for [a-zA-Z0-9_]) ($2)
g       all occurrences (global)

关于正则表达式的更多信息：http://www.javascriptkit.com/javatutors/redev.shtml。

- user1636522

Answer 6

在这里：

var str = 'Lorem_ipsum_dolor_sit_amet,_consectetur____adipiscing_elit.'
str = str.replace(/_{1,}/g,' ').replace(/(\s{1,}|\b)(\w)/g, function(m, space, letter)
{
  return space + letter.toUpperCase();
})

console.log(str);

- Alexandre Perez