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


Convert slug variable to title text with javascript

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

所以，我有一个变量，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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>
'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+'">'+makeTitle(thisID)+'';
    }
    // make sense?
}

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

谢谢

相关讨论

1
2
3
4
5
6
function titleize(slug) {
    var words = slug.split("-");
    return words.map(function(word) {
        return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
    }).join(' ');
}

它非常简单：

  • 它将字符串按-拆分为单词。
  • 它将每个单词映射到标题框中。
  • 它将生成的单词与空格连接起来。
相关讨论

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

1
2
3
4
5
6
7
8
9
10
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(' ');
}
相关讨论

一言为定：

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

输出：Athlete Profile。

问题中的makeTitle()部分可以实现如下：

1
2
3
4
5
function makeTitle(thisID) {
    return thisID.replace(/-/g,"").replace(/\b[a-z]/g, function () {
            return arguments[0].toUpperCase();
        });
}

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

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

至于在不使用正则表达式的情况下进行此操作，我不确定为什么您特别希望避免使用它们，尤其是在这种情况下，所需表达式非常简单的情况下(特别是如果您按照上面所示的两个步骤进行连字符到空格和首字母大写)。但是有无数种方法可以做到这一点，而不用使用各种组合的JavaScript字符串操作方法。