使用javascript将slug变量转换为标题文本

Question

我正在尝试做一些类似于将类似url slug的变量转换为可用于标题的文本的事情。

例如，我有一个变量，它是这样的：

var thisID = 'athlete-profile';
function myFunc(thisID) {
    // i need to use thisID as the id and href in a loop that generates a string of <li><a>'s
    function makeTitle(thisID) {
        // convert thisID to text so for this example it would return 'Athlete Profile'
        return 'Athlete Profile';
    }
    for () {
        var str = '<li id="'+thisID+'"><a href="#'+thisId+'">'+makeTitle(thisID)+'</a>';
    }
    // make sense?
}

如果可能的话，我不想用正则表达式来做这件事，但我认为没有正则表达式就没有办法做到这一点。所以任何一个知道如何做这类事情的人都告诉我，这将是一个很大的帮助。

感谢

Answer 1

我建议您使用正则表达式。但是，如果您真的不想使用正则表达式，下面的解决方案适用于simple的情况。可以随意修改。

function makeTitle(slug) {
  var words = slug.split('-');
  for (var i = 0; i < words.length; i++) {
    var word = words[i];
    words[i] = word.charAt(0).toUpperCase() + word.slice(1);
  }
  return words.join(' ');
}
console.log(
  makeTitle("athlete-profile")
)

Answer 2

function titleize(slug) {
  var words = slug.split("-");
  return words.map(function(word) {
    return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
  }).join(' ');
}
console.log(titleize("athlete-profile"))

它的工作原理非常简单：

• 它通过-将字符串拆分为单词
• 它将每个单词映射到标题格中
• 它用空格连接生成的单词

Answer 3

问题的makeTitle()部分可以这样实现：

function makeTitle(thisID) {
  return thisID.replace(/-/g, " ").replace(/b[a-z]/g, function() {
    return arguments[0].toUpperCase();
  });
}
console.log(makeTitle("athlete-profile"))

第一个.replace()将所有连字符更改为空格，然后第二个.replace()将单词边界后面的任何小写字母改为大写。

（有关更多信息，请参阅.replace()的MDN文档。）

至于在不使用正则表达式的情况下执行此操作，我不知道您为什么要特别避免使用它们，尤其是在这种情况下，所需的表达式非常简单的情况下（尤其是如果您按照上面所示的两个步骤将连字符分隔为空格和第一个字母大写）。但是，在没有regex的情况下，有无数种方法可以做到这一点，这些方法使用JavaScript字符串操作方法的各种组合。

Answer 4

在一行中完成：

'athlete-profile'.split("-").join(" ").replace(/wS*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()})

输出：Athlete Profile

Answer 5

喜欢这个吗

  let someString = 'im a string';
  console.log(someString.replace(/-/g, ' ')
    .replace(/wS*/g, function (txt) {
      return
      txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
    })
  )

输出：Im A字符串

Answer 6

短平快的方法：

const slugToText = (slug) => {
   return slug.toLowerCase().replace(/-/g,' ')
}

Answer 7

简化答案

我们可以使用String.prototype.replaceAll方法来轻松地实现这个

function convertSlugToString(slug) {
  return slug.replaceAll("-", " ");
}

如果你想确保输出都是小写的，那么你可以执行以下

function convertSlugToString(slug) {
  return slug.toLowerCase().replaceAll("-", " ");
}

附加信息：

String.protype.replaceAll（）是ES2021的一项功能，它还支持93.64%的全球覆盖率，点击此处了解更多信息

如果您想支持IE，请参阅其他答案

Answer 8

这里有一个可以添加到应用程序助手中的一行代码：

/**
 * Converts slug to title
 * 
 * @example
 * toTitle('slug-word')
 */
const toTitle = (slug) => slug.toLowerCase().split(/[-_.s]/).map((w) => `${w.charAt(0).toUpperCase()}${w.substr(1)}`).join(' ');

示例：

toTitle('one-two_three.four Five')
>> 'One Two Three Four Five'