更改每个单词首字母的值答案

【问题标题】：Changing the value of the first letter of each word更改每个单词首字母的值
【发布时间】：2012-07-31 23:58:37
【问题描述】：

我正在尝试使用 jQuery、CSS 或 PHP 来增加字符串中每个单词的首字母的字体大小。例如，我将在 h1 标签中有一个标题，如下所示：

<h1>The title of this page goes here</h1>

我想将所有文本转换为大写（CSS 没有问题），然后增加字符串中出现的第一个字母的字体大小。使用CSS或jQuery，有没有办法选择每个单词的第一个字母并对其进行修改？

【问题讨论】：

标签： jquery css

【解决方案1】：

$(document).ready(function() {
    var words = $('h1').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('h1').html(html);
});

这是一个实际应用的例子：http://jsfiddle.net/hCvsu/1/

【讨论】：

这只是第一个字符。用户要求输入每个单词的第一个字符，这需要更多的脚本。
太棒了......这很有效。只是为了提醒将来的任何人，jsfiddle 链接似乎不起作用，但提供的解决方案可以。谢谢！
这里的一个优点是text 和html 的组合，它应该保留HTML 实体（不过，如果需要，任何代码都可以轻松地适应它）。
在h1 中包含spannested 会影响搜索引擎优化吗？

【解决方案2】：

我无法让:first-letter 工作，但这是一个可能的解决方案，假设<h1> 不包含额外的标签或实体：

$('h1').html(function(i,html){
    return html.replace(/(\S)(\S*)/g, '<span class="FirstLetter">$1</span>$2');
});

CSS：

.FirstLetter {color:green}

一个可能的好处是这应该适用于所有浏览器。
正则表达式相当简单：\S 代表非空白字符。它逐字匹配并捕获第一组 ($1) 中每个单词的第一个字母，以及第二组 ($2) 中的其余字母，以便于替换。

工作示例：http://jsbin.com/ufovi4

【讨论】：

+1 我试图考虑如何使用正则表达式来做到这一点。我喜欢这个。
非常简洁的解决方案。我会尽量记住它以备将来使用。

【解决方案3】：

如果您的页面中只有一个 h1，Ajma 解决方案就可以工作。

这适用于所有 h1 ：

  $('h1').each(function() {
     var jqt = $(this);
     var txt = jqt.text();
     jqt.html('<span style="font-size:200%">'+txt.substring(0,1)+'</span>'+ txt.substring(1));
  });

可能的改进：代替带有样式的跨度，创建带有类的跨度并在 CSS 中执行 font-size:200%。

可能的问题：如果您的 h1 包含其他标签（它不应该！）这些标签丢失，只保留文本。

希望对你有帮助，西蒙娜

【讨论】：

【解决方案4】：

Here is the JSfiddle

var h1 = $('h1'),
    words = h1.html().split(' '),
    withCaps = '';
for (var i = 0; i < words.length; i++)
    withCaps += '<span>' + words[i].substring(0, 1).toUpperCase() + '</span>' + words[i].substring(1) + ' ';

h1.html(withCaps);

【讨论】：

非常好...谢谢这个选项...我很感激！

【解决方案5】：

最简单的方法可能就是直接使用 CSS，尽管它会为您编写一些额外的标记。但是，JQuery 最终会产生相同数量的额外标记，但会产生额外的开销，并且如果没有 JS 支持，它就会失败。 h1.dropcaps div{ 向左飘浮; } h1.dropcaps div：第一个字母{ 字体大小：300%；字体粗细：粗体； }

<h1 class="dropcaps"><div>Your</div> <div>text</div> <div>here</div>

更新： 事实证明 :first-letter 在某些浏览器的内联元素中不起作用。

解决这个问题的诀窍是将它们放在 div 中，然后浮动 div。我已经修改了我的标记。 http://jsfiddle.net/MBZaw/

【讨论】：

【解决方案6】：

这会奏效。只需将您的 CSS 设置为 h1 span {font-size: 125%} 或其他任何内容。

$('h1').each(function(){
    var $this = $(this);
    var words = $this.text().split(' ');
    var newHtml = '';
    for (var i = 0; i < words.length; i++) {
         newHtml += '<span>' + words[i].substring(0, 1) + '</span>' + words[i].substring(1) + ' ';
    }
    $this.html(newHtml);
});

【讨论】：