4

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

我有几个来自不同来源的 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页面上每个元素的首字母大写？

阅读此线程后，尝试了以下操作：

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-letterCSS 语法。）

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

编辑 2

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

4

5 回答 5

3

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

$('h2').each(function(){
    var str = capitaliseFirstLetter($(this).text());
    $(this).text(str);  // Set the text of the element
});
于 2012-12-06T19:21:22.500 回答
3

你可以做这个功能

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);  
});
于 2012-12-06T19:34:25.867 回答
2

难道你不能只使用 CSS

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

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

于 2012-12-06T19:27:06.817 回答
1

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

$('h2').each(function(){
  $(this).text(capitaliseFirstLetter($(this).text()));
});
于 2012-12-06T19:21:13.610 回答
1

你不能做任何你只需添加以下css的事情

 h2{
       text-transform: lowercase;
    }


h2 {
    text-transform: lowercase;
}
<h2>My Name is xYz</h2>

于 2018-03-31T06:54:53.343 回答