【问题标题】:How to convert camel case to proper case in Vue.js?如何在 Vue.js 中将驼峰大小写转换为正确大小写?
【发布时间】:2018-12-18 19:00:40
【问题描述】:

我正在从 MongoDB 集合中检索数据并在 ag-grid 中填充数据。我希望列标题在适当的情况下使用间距。最初,该集合有文本行“businessAreaName”,我希望它看起来像“Business Area Name”。

我正在使用正则表达式的概念,但无法找出正确大小写的表达式。

headerName: x.replace(/_/g, ' ').replace(/\w\S*/g, function (txt) 
  { 
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 
  })

上面的表达式给我的输出是“Businessareaname”。欢迎提出任何建议。

【问题讨论】:

  • 这样的? "businessAreaName".replace(/([A-Z])/g, ' $1').replace(/^./, Function.call.bind("".toUpperCase))
  • @blex 所以 $1 是读取表达式中空格的逻辑吗?
  • /([A-Z])/g 正则表达式中,您可以看到括号。这些括号创建了一个捕获组。它捕获每个大写字母,并用空格和字母替换它,用$1 表示。如果表达式有多组括号,则可以使用$1$2... 访问它们

标签: javascript regex vue.js vuejs2 ag-grid


【解决方案1】:

你真正需要做的就是

  1. 用空格替换每个大写字符,然后是该字符
  2. 将第一个字符替换为大写

可以这样做:

const deCamelCase = str => str.replace(/[A-Z]/g, ' $&').replace(/^./, toUppercase);
const toUppercase = str => str.toUpperCase();

分解:

str => str.replace(/[A-Z]/g, ' $&')

这匹配任何大写字符(仅限拉丁字母!)并将其替换为由空格组成的字符串,加上整个匹配的字符串,编码为$&。请注意,我们需要使用/g 标志来确保我们匹配每个实例。

str => str.replace(/^./, toUppercase)

这仅匹配字符串中的第一个字符,并使用toUppercase 函数替换它,为了便于阅读,我在单独的行上定义了它。

【讨论】:

  • 没问题。祝你的项目好运!
猜你喜欢
  • 1970-01-01
  • 2017-07-28
  • 1970-01-01
  • 2018-10-17
  • 2021-04-27
  • 2011-02-27
  • 1970-01-01
  • 2016-08-07
相关资源
最近更新 更多