使用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?
}

我希望如果可能的话不要使用正则表达式来完成这个任务，但我认为没有不用正则表达式的方法。因此，任何知道如何完成此类任务的人都可以告诉我，这将是一个很大的帮助。

谢谢。

- jaredwilli

---

那个 for 循环在做什么？元素 ID 需要是唯一的，所以你不应该在循环中创建元素并给它们相同的 ID。 - nnnnnn

不，thisID始终是一个不同的id，实际上，我想让它变成<li class="'thisID"。 for循环可以忽略不计。我真的只担心makeTitle()函数和返回变量但没有连字符。然后我可以使用CSS将文本大写。 - jaredwilli

如果你只想把连字符改成空格，那么非常简单：thisID.replace(/-/g, " ")（就像我回答的第一部分所示）。但是，像下面任何一个答案所示，进行大写化也很容易。 - nnnnnn

Answer 1

我建议您使用正则表达式。但如果您真的不想使用正则表达式，下面的解决方案适用于简单情况。请随意根据您自己的需要进行修改。

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")
)

- Moon

---

你为什么建议在这种情况下使用正则表达式？ - icktoofay

请参考@icktoofay: https://dev59.com/71fUa4cB1Zd3GeqPMuwX ... 而且，在这种特定情况下，正则表达式也不太复杂。 - Moon

@icktoofay - 我建议使用正则表达式来解决这个问题，原因有两个。首先，它是一个非常简单的解决方案。其次，用普通英语表达要求，OP想要用空格替换连字符，并将第一个字母小写替换为大写，所以对我来说，使用.replace()方法实现这一点似乎是唯一合乎逻辑的选择。显然还有其他方法可以做到这一点，你的答案中的.split()和.join()方法（或者这个）也很不错。 - nnnnnn

我本来一段时间前就想回复你的，但后来意识到我可以使用split（）方法在“-”处拆分它，然后将2个数组键连接在一起。虽然CSS可以进行大写化处理，但我没有使用这个精确答案，但是这个通用思路是正确的，如果我先看到它再记起它可以用split（）实现。 - jaredwilli

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"))

它的工作原理非常简单：

• 它通过-将字符串拆分为单词。
• 它将每个单词映射到标题案例。
• 它使用空格将结果单词连接起来。

- icktoofay

---

请注意，这需要 Array.prototype.map。一些旧版浏览器不支持它。如果有问题，您可以使用 shim 或使用 jQuery 的 $.map 或 underscore.js 的 _.map 或其他库的等效函数。 - icktoofay

你链接的MDN页面提供了一个独立实现的.map()，如果OP不想包含整个库，可以使用它。 - nnnnnn

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()将任何跟在单词边界后面的小写字母变成大写字母。

（更多信息请参见MDN文档 .replace()。）

至于不使用正则表达式来完成它，我不确定为什么您要特别避免它们，尤其是在这种情况下所需的表达式非常简单（特别是如果您按上面显示的两个步骤进行连字符到空格和首字母大写化）。但是，使用各种JavaScript的字符串操作方法的各种组合可以无限地完成此操作。

- nnnnnn

Answer 4

一行代码搞定：

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

输出：运动员个人资料

- Manindra Gautam

Answer 5

像这样做

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

输出：我是一个字符串

- Michael

Answer 6

简单明了的答案

我们可以使用String.prototype.replaceAll方法来轻松实现这一点。

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

如果你想确保输出全部为小写，可以执行以下操作

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

附加信息：

String.prototype.replaceAll() 是 ES2021 的一个特性，它在全球范围内有着93.64%的浏览器支持率，点击这里获取更多信息。

如果您想要支持IE，请参考其他答案。

- Nivethan

Answer 7

简洁而精彩的方式：

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

- Ramin eghbalian

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'

- SimoAmi