jQuery:制作具有不同大小写标题大小写的字符串

Question

很简单的问题，但我似乎找不到答案。

我有几个来自不同来源的 HTML 页面，它们的 <h2> 中有字符串大写字母的元素。如:

<h2>Are there OTHER USES for this medicine?</h2>

我希望将这些常规句子大小写，即，

<h2>Are there other uses for this medicine?</h2>

我首先使用 CSS 将它们全部设为小写:

h2 {
  text-transform: lowercase;
}

因为我希望通过制作一个仅将第一个字母大写的函数来使用 jQuery 来操作它们。

所以问题是:我将如何编写一个 jQuery 函数来将每个 h2 的第一个字母大写？页面上的元素？

看完this thread ，试过这个:

function capitaliseFirstLetter(string){
  return string.charAt(0).toUpperCase() + string.slice(1);
}

$('h2').each(function(){
  capitaliseFirstLetter($(this).text());
});

但是没用，控制台也没有报错，不知道怎么回事。

编辑

我在这个问题上犯了一个很大的疏忽。使用

text-transform: lowercase

把我变成小写，所以

<h2>What should I do in case of OVERDOSE?</h2>

成为

<h2>What should i do in case of overdose?</h2>

当我使用@marcelo-biffara 的解决方案时。 (或 :first-letter CSS 语法。)

现在，我是否需要使用复杂的正则表达式来将字符串“i ”大写？

编辑 2

如果“i ”出现两次(例如“如果我服用太多剂量我该怎么办？”)，我是否需要一个循环来将它们替换为“I ”？

Answer 1

你可以实现这个功能

function capitalizeMe(val){
    return val.charAt(0).toUpperCase()+val.substr(1).toLowerCase();
}

哦，也许你需要删除你的 css h2 规则

你可以像这样将它应用到你的 h2

$('h2').each(function(){
    var str = capitalizeMe($(this).html());
    $(this).html(str);  
});


function replaceAll( text, v1, v2 ){
  while (text.toString().indexOf(v1) != -1)
      text = text.toString().replace(v1,v2);
  return text;
}

如果你想将“i”的每个实例都大写，你可以这样做

$('h2').each(function(){
    var str = replaceAll(capitalizeMe($(this).html())," i "," I ");
    $(this).html(str);  
});