logo标签列表

使用JavaScript将字符串转换为标题大小写

javascripttitle-case
779

有没有一种简单的方法将字符串转换为标题格式？例如，john smith 变成 John Smith。我不想要像John Resig的解决方案那样复杂的东西，只是（希望）一种一两行代码就能实现的方法。

1
有许多方法，我们有一些性能统计数据吗？ - theAnubhav
1
@theAnubhav 是的，我们现在有一个基准。 - Ulysse BN
2
到了2022年，浏览器仍然没有本地功能来执行此操作。 - Sơn Trần-Nguyễn
1
这种大小写格式完全取决于语言/地点/文化。 - James Moore
我希望解决方案的一个测试用例是“Comhrá i mBÁC le Seán Nguyen” - 祝你好运！基本上，计算机可以执行称为“标题大小写”的操作的想法可能是没有希望的，即使给定了大量的机器学习资源。 - James Moore
69个回答
8
var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

似乎可以工作... 使用上述内容进行测试，"the quick-brown, fox? /jumps/ ^over^ the ¡lazy! dog..." 和 "C:/program files/some vendor/their 2nd application/a file1.txt"。

如果你想要2Nd而不是2nd，你可以改为/([a-z])(\w*)/g。

第一个表单可以简化为：

function toTitleCase(toTransform) {
  return toTransform.replace(/\b([a-z])/g, function (_, initial) {
      return initial.toUpperCase();
  });
}
6

jim-bob -> 吉姆-鲍勃

jim/bob -> 吉姆/鲍勃

jim_bob -> 吉姆_鲍勃

isn't -> 不是

école -> École

McDonalds -> 麦当劳

function toTitleCase(str) {
  return str.replace(/\p{L}+('\p{L}+)?/gu, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.slice(1)
  })
}
6
使用 /\S+/g 支持重音符号： 

function toTitleCase(str) {
  return str.replace(/\S+/g, str => str.charAt(0).toUpperCase() + str.substr(1).toLowerCase());
}

console.log(toTitleCase("a city named örebro")); // A City Named Örebro

然而："sunshine (yellow)" ⇒ "Sunshine (yellow)"

（提示：这是一个技术术语，可能需要在使用时注意大小写）
6
"john f. kennedy".replace(/\b\S/g, t => t.toUpperCase())
2
适用于样例和o'henry，但在horse's mouth方面表现出奇怪的行为。 - Michael
"john f. kennedy".toLowerCase().replace(/\b\S/g, t => t.toUpperCase()) 更好 - w3debugger
不想编辑@Proximo的答案：\b和\S是特殊的字符类，表示“单词边界”和“单个非空格字符”。因此，正则表达式匹配单词边界后面的每个单个字符，并通过应用给定的箭头函数将该字符大写。 - Jens
5

以下是使用CSS的另一种解决方案（如果要转换的文本是大写字母，则需要使用JavaScript）：

HTML

<span id='text'>JOHN SMITH</span>

js

var str = document.getElementById('text').innerHtml;
var return_text = str.toLowerCase();

css

#text{text-transform:capitalize;}
5
我认为最简单的方法就是使用CSS。
function format_str(str) {
    str = str.toLowerCase();
    return '<span style="text-transform: capitalize">'+ str +'</span>';
}
我更新了代码并进行了测试。现在应该可以工作了。 - wondim
你只能在 JS 使用的一小部分环境中使用 CSS，因此这个解决方案不可行。此外，应尽量避免使用内联样式。 - Madbreaks
@Steve，它会通过 toLowerCase() 吗？ - wondim
5
我已经测试了这个解决方案，对于土耳其语来说它可以处理特殊字符。 

function toTitleCase(str) {
  return str.toLocaleLowerCase().replace(
    /(^|Ü|ü|Ş|ş|Ç|ç|İ|ı|Ö|ö|\w)\S*/g,
    (txt) => txt.charAt(0).toLocaleUpperCase() + txt.substring(1),
  )
}

console.log(toTitleCase('İSMAİL HAKKI'))
console.log(toTitleCase('ŞAHMARAN BİNBİR GECE MASALLARI'))
console.log(toTitleCase('TEKNOLOJİ ÜRÜNÜ'))

由于我的数据都是大写的，因此我在开头添加了“toLocaleLowerCase”。如果不需要，可以将其丢弃。

对于非英语语言，使用本地化操作很重要。

所选答案有漏洞。这个更好。 - Billy
toTitleCase("TEKNOLOJİ ÜRÜNÜ") 返回的结果是 Teknoloji̇ üRünü。顺便提一下。 - Ozgun Senyuva
@OzgunSenyuva 谢谢你。我已经编辑了我的答案来解决这个问题。 - Kerem
使用本地化操作对于非英语语言非常重要，但是您的解决方案忽略了本地化操作。您假设需要处理的字符位于char(0)，这是不正确的。例如，您需要一个测试用例来检查“oifig na bpasanna”的正确转换是“Oifig na bPasanna”，而“Oifig Na Bpasanna”甚至都不接近正确。您也不能对单个字符执行toLocaleUpperCase操作；它根本不起作用。例如，OIFIG NA bPASANNA（注意'b'）全部大写：https://commons.wikimedia.org/wiki/File:ALLCAPS_OIFIG_NA_bPASANNA.JPG - James Moore
在“džungla”上不起作用。 - user3840170
5

试试这个

String.prototype.toProperCase = function(){
    return this.toLowerCase().replace(/(^[a-z]| [a-z]|-[a-z])/g, 
        function($1){
            return $1.toUpperCase();
        }
    );
};

示例

var str = 'john smith';
str.toProperCase();
5
这是我的函数，用于处理重音字符（对法语很重要！）并可以开关小写字母的处理。希望能帮到你。
String.prototype.titlecase = function(lang, withLowers = false) {
    var i, string, lowers, uppers;

    string = this.replace(/([^\s:\-'])([^\s:\-']*)/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }).replace(/Mc(.)/g, function(match, next) {
        return 'Mc' + next.toUpperCase();
    });

    if (withLowers) {
        if (lang == 'EN') {
            lowers = ['A', 'An', 'The', 'At', 'By', 'For', 'In', 'Of', 'On', 'To', 'Up', 'And', 'As', 'But', 'Or', 'Nor', 'Not'];
        }
        else {
            lowers = ['Un', 'Une', 'Le', 'La', 'Les', 'Du', 'De', 'Des', 'À', 'Au', 'Aux', 'Par', 'Pour', 'Dans', 'Sur', 'Et', 'Comme', 'Mais', 'Ou', 'Où', 'Ne', 'Ni', 'Pas'];
        }
        for (i = 0; i < lowers.length; i++) {
            string = string.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), function(txt) {
                return txt.toLowerCase();
            });
        }
    }

    uppers = ['Id', 'R&d'];
    for (i = 0; i < uppers.length; i++) {
        string = string.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), uppers[i].toUpperCase());
    }

    return string;
}
5

以下是一个非常简单且精炼的ES6函数：

const titleCase = (str) => {
  return str.replace(/\w\S*/g, (t) => { return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase() });
}

export default titleCase;

将工具类代码放在 utilities 文件夹中，然后按照以下方式使用：

import titleCase from './utilities/titleCase.js';

const string = 'my title & string';

console.log(titleCase(string)); //-> 'My Title & String'
我不建议使用Lodash的startCase，因为它会剥离掉像'&'这样的字符。 - Hedley Smith
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接