当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《使用JavaScript将字符串转换为标题大小写》经验,为你挑选了20个好方法。

有没有一种简单的方法将字符串转换为标题案例?我john smith变成了John Smith.我不是在寻找像John Resig这样复杂的解决方案,只是(希望)某种单线或双线.



1> Greg Dean..:

试试这个:

    function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }
Input:

Output:


2> Tuan..:

一种稍微优雅的方式,适应Greg Dean的功能:

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

称之为:

"pascal".toProperCase();


@ marco-fiset因为它与其他人玩得不好!如果您有2个库都试图修改具有不兼容更改的本机JavaScript对象,则会发生错误.想象一下,如果jQuery和谷歌地图遵循这种设计模式,你就不能在同一页面上同时拥有它们.
我觉得"不要修改本机JavaScript对象"语句就像"从不使用goto"或"eval is evil".有很多情况可以.如果您完全控制您的项目,当然不打算将其作为库发布,我发现此方法没有问题.
@daniellmb他为什么不改变String原型?我认为这是一个很好的解决方案.想想ruby开放类,将函数添加到现有类中是完全有效的,并且它被广泛接受.
@daniellmb一个很好的观点.前缀方法名称应该有助于避免这种情况,因为这会使方法不可枚举.
请记住,如果你的用户名字中有一个破折号并输入`Jo-Ann Smith`,这段代码会将它们转换为`Jo-ann Smith`(注意`Ann`中的小写`a`).

3> 小智..:

尝试将文本转换 CSS样式应用于控件.

例如: (text-transform: capitalize);

只在绝对必要时才使用JS方法.


JS在浏览器之外使用.
-1.这个css有效,但不像大多数人期望的那样有效,因为如果文本以全部大写字母开头,则没有效果.http://www.webmasterworld.com/forum83/7506.htm
@Akshar:小写规则将被标题案例规则取代.由于css不会修改源内容,因此效果是删除了小写规则(将源内容保留在所有大写字母中),然后将应用标题规则(不执行任何操作).

4> a8m..:

这是我的版本,IMO也很容易理解和优雅.

var str = "foo bar baz"

console.log(

str.split(' ')
   .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
   .join(' ')

)
// returns "Foo Bar Baz"


或者,您可以在映射中小写子字符串:```str.split('').map(i => i [0] .toUpperCase()+ i.substring(1).toLowerCase()).join( '')```
我不同意调用`.toLowerCase()`.诸如"麦当劳"之类的名称或诸如"ASAP"之类的首字母缩略词应保留其大写字符.如果有人实际传入了像"heLLO"这样的字符串,则应用程序不应该认为大写字母不正确.

5> Geoffrey Boo..:

这是我的函数,它转换为标题大小写,但也保留定义的首字母缩略词作为大写和小写单词作为小写:

String.prototype.toTitleCase = function() {
  var i, j, str, lowers, uppers;
  str = this.replace(/([^\W_]+[^\s-]*) */g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });

  // Certain minor words should be left lowercase unless 
  // they are the first or last words in the string
  lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At', 
  'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'];
  for (i = 0, j = lowers.length; i < j; i++)
    str = str.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'), 
      function(txt) {
        return txt.toLowerCase();
      });

  // Certain words such as initialisms or acronyms should be left uppercase
  uppers = ['Id', 'Tv'];
  for (i = 0, j = uppers.length; i < j; i++)
    str = str.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'), 
      uppers[i].toUpperCase());

  return str;
}

例如:

"TO LOGIN TO THIS SITE and watch tv, please enter a valid id:".toTitleCase();
// Returns: "To Login to This Site and Watch TV, Please Enter a Valid ID:"


固定.第三行中的正则表达式已经从`/\w\S*/g`更改为`/([^\W _] + [^\s - ]*)*/g`每个@ awashburn上面的评论来解决这个问题.
在[`/\b\w+/g`](http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript)上使用正则表达式模式可以获得一个优势吗? #comment31909172_196991),我发现它更容易被理解?
不是我能看到的,我只是采取了另一个评论者的建议来解决连字词问题; 但你的正则表达似乎也一样,简单总是更好.对于这篇文章的后代和未来访问者,我只是将第三行中的正则表达式从`/([^\W _] + [^\s - ]*)*/g`更改为`/\b\w +/g` per @ Michael的评论; 如果您发现需要更复杂的正则表达式的情况,请发表评论.

6> Tom Kay..:

我更喜欢以下其他答案.它只匹配每个单词的第一个字母并将其大写.更简单的代码,更易于阅读和更少的字节.它保留现有的大写字母以防止扭曲缩写词.但是你总是可以toLowerCase()先调用你的字符串.

function title(str) {
  return str.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}

您可以将其添加到您的字符串原型中,这将允许您'my string'.toTitle()按如下方式:

String.prototype.toTitle = function() {
  return this.replace(/(^|\s)\S/g, function(t) { return t.toUpperCase() });
}


它甚至更好,因为lambda`constor titleCase =(str)=> str.replace(/\b\S/g,t => t.toUpperCase());`
@Madbreaks虽然你最初的例子是设计的,但是如果输入是大写的,那么你就可以说输出没有变化.话虽如此,我觉得答案原样(编辑建议`toLowerCase`)比承担开发者意图的更灵活/有用.此方法还反映了其他语言的类似内置方法的功能,如PHP(`ucwords`)和Golang(`strings.Title`)..NET(`TextInfo.ToTitleCase`)有趣地适用于混合大小写,但也会使完全大写的字符串保持不变.

7> Mike..:

不使用正则表达式仅供参考:

String.prototype.toProperCase = function() {
  var words = this.split(' ');
  var results = [];
  for (var i = 0; i < words.length; i++) {
    var letter = words[i].charAt(0).toUpperCase();
    results.push(letter + words[i].slice(1));
  }
  return results.join(' ');
};

console.log(
  'john smith'.toProperCase()
)



8> fncomp..:

如果您担心这些填充词,您可以随时告诉函数什么不要大写.

/**
 * @param String str The text to be converted to titleCase.
 * @param Array glue the words to leave in lowercase. 
 */
var titleCase = function(str, glue){
    glue = (glue) ? glue : ['of', 'for', 'and'];
    return str.replace(/(\w)(\w*)/g, function(_, i, r){
        var j = i.toUpperCase() + (r != null ? r : "");
        return (glue.indexOf(j.toLowerCase())<0)?j:j.toLowerCase();
    });
};

希望这可以帮助你.

编辑

如果你想处理领先的胶水词,你可以跟踪这个w /还有一个变量:

var titleCase = function(str, glue){
    glue = !!glue ? glue : ['of', 'for', 'and', 'a'];
    var first = true;
    return str.replace(/(\w)(\w*)/g, function(_, i, r) {
        var j = i.toUpperCase() + (r != null ? r : '').toLowerCase();
        var result = ((glue.indexOf(j.toLowerCase()) < 0) || first) ? j : j.toLowerCase();
        first = false;
        return result;
    });
};


您可以将字符串分解为数组.所以我们可以有葡萄牙语,西班牙语,意大利语和法语介词:`glue ='de | da | del | dos | do | das | des | la | della | delli'.split('|');`

9> simo..:

这仅适用于一个单词字符串,但这就是我需要的:

var result =
  'this is very interesting'.replace(/\b[a-z]/g, (x) => x.toUpperCase())

console.log(result) // This Is Very Interesting

JSFiddle: https ://jsfiddle.net/simo/gou2uhLm/



10> immazharkhan..:

如果上述解决方案中使用的正则表达式让您感到困惑,请尝试以下代码:

function titleCase(str) {
  return str.split(' ').map(function(val){ 
    return val.charAt(0).toUpperCase() + val.substr(1).toLowerCase();
  }).join(' ');
}


这与两年前的[a8m的答案](/sf/ask/17360801/)相同。

11> KevBot..:

你可以立即toLowerCase使用字符串,然后只是toUpperCase每个单词的第一个字母.成为一个非常简单的1班轮:

function titleCase(str) {
  return str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase());
}

console.log(titleCase('iron man'));
console.log(titleCase('iNcrEdible hulK'));


12> 小智..:

我做了这个功能,可以处理姓氏(所以它不是标题案例),如"麦当劳"或"麦当劳"或"奥图尔"或"D'Orazio".然而,它并不处理带有"van"或"von"的德语或荷兰语名称,这些名称通常是小写的......我认为"de"通常也是小写,例如"Robert de Niro".这些仍然需要解决.

function toProperCase(s)
{
  return s.toLowerCase().replace( /\b((m)(a?c))?(\w)/g,
          function($1, $2, $3, $4, $5) { if($2){return $3.toUpperCase()+$4+$5.toUpperCase();} return $1.toUpperCase(); });
}



13> PhiLho..:
var toMatch = "john w. smith";
var result = toMatch.replace(/(\w)(\w*)/g, function (_, i, r) {
      return i.toUpperCase() + (r != null ? r : "");
    }
)

似乎工作......用上面的测试,"快速的棕色,狐狸?/跳跃/ ^超过'懒惰!狗..."和"C:/程序文件/一些供应商/他们的第二个应用程序/ a FILE1.TXT".

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

第一种形式可以简化为:

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



14> Maxi Baez..:

试试这个

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();



15> jssridhar..:

ES 6

str.split(' ')
   .map(s => s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase())
   .join(' ')

其他

str.split(' ').map(function (s) {
    return s.slice(0, 1).toUpperCase() + s.slice(1).toLowerCase();
}).join(' ')


a8m答案的副本

16> Vikram..:

尝试这个,最短的方式:

str.replace(/(^[a-z])|(\s+[a-z])/g, txt => txt.toUpperCase());



17> lewax00..:

大多数答案似乎忽略了使用单词边界元字符(\ b)的可能性.Greg Dean使用它的简短版本:

function toTitleCase(str)
{
    return str.replace(/\b\w/g, function (txt) { return txt.toUpperCase(); });
}

适用于像Jim-Bob这样的带连字符的名字.


是一个优雅的部分解决方案,但不适用于重音或大写字符串.我得到"SofíaVergara"=>"SofíAVergara"或"SofíaVERGARA"=>"SofíAVERGARA".第二种情况可以通过在.replace(...)之前应用.toLowerCase()函数来解决.第一种情况需要找到正确的正则表达式.
嗯,这似乎是正则表达式实现中的一个错误,我认为重音字符应该是单词字符(你是正确的,因为它不适用于那些情况).

18> wondim..:

我认为最简单的是使用CSS.

function format_str(str) {
    str = str.toLowerCase();
    return ''+ str +'';
}



19> le_m..:

使用/\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


20> waqas..:

如果您可以在代码中使用第三方库,那么lodash为我们提供了一个帮助函数.

https://lodash.com/docs/4.17.3#startCase

_.startCase('foo bar');
// => 'Foo Bar'

_.startCase('--foo-bar--');
// => 'Foo Bar'
 
_.startCase('fooBar');
// => 'Foo Bar'
 
_.startCase('__FOO_BAR__');
// => 'FOO BAR'
推荐阅读
jerry613
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有