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

将单词I设为小写，所以

<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”（例如“如果服用过多剂量该怎么办？”），我是否需要一个循环来替换它们？“

Answer 1

capitaliseFirstLetter($(this).text());会返回一个字符串。而已。你没有对那个字符串做任何事情。你需要将返回的字符串放在某处。

$('h2').each(function(){
    var str = capitaliseFirstLetter($(this).text());
    $(this).text(str);  // Set the text of the element
});

Answer 2

你可以做这个功能

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

Answer 3

你不能只使用CSS

h2 {
    text-transform: lowercase;
}
h2:first-letter {
    text-transform: capitalize;
}

http://jsfiddle.net/mowglisanu/CbDHH/

Answer 4

您需要保存h2内容的新值：

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

Answer 5

你不能做任何你只是按照css

添加的内容

 h2{
       text-transform: lowercase;
    }

＆＃13;

h2 {
    text-transform: lowercase;
}

＆＃13;

<h2>My Name is xYz</h2>

＆＃13;

jQuery：使用不同的大写标题来创建字符串

5 个答案: