更改每个单词的第一个字母的值

我试图使用jQuery，CSS或PHP来增加字符串中每个单词的第一个字母的字体大小。例如，我将不得不像这样在H1标签标题：更改每个单词的第一个字母的值

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

我想文本转换所有的文本为大写（与CSS没问题），但后来增加的字体大小字符串中出现的第一个字母。有了CSS或jQuery，有没有办法选择每个单词的第一个字母并修改它？

来源

2011-02-16 flinx777

$(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/

来源

2011-02-16 20:47:45 ajma

这只是第一个字符。用户询问每个单词的第一个字符，这需要更多的脚本。 – 2011-02-16 20:50:43

糟糕，我误读了。固定。 – ajma 2011-02-16 20:52:15

真棒...这工作。只是要注意将来的任何人，jsfiddle链接似乎不起作用，但提供的解决方案确实如此。谢谢！ – flinx777 2011-02-16 21:10:36

最简单的方法可能只是直CSS，但它造成了一点额外的标记为你写。但是，JQuery最终会产生相同数量的额外标记，但会带来额外的开销，并且会在没有JS支持的情况下失败。 h1.dropcaps div {float：left; } h1.dropcaps div：第一个字母字体大小：300％; font-weight：bold; }

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

UPDATE： 事实证明：第一字母并不在某些浏览器内嵌元素在里面工作。

解决这个问题的技巧是将它们放在div中，并浮动div。我修改了我的标记。 http://jsfiddle.net/MBZaw/

来源

2011-02-16 20:48:49

我不能让: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），以便于替换。

工作的例子：如果你在你的页面只有一个H1 http://jsbin.com/ufovi4

来源

2011-02-16 20:51:04 Kobi

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

可能的改进：不是一个风格的跨度，创建一个跨度的一类和你FONT-SIZE：在CSS 200％。

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

希望它能帮助，西蒙娜

来源

2011-02-16 20:53:55

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

来源

2011-02-16 20:55:32

这将工作。只需在您的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); 
});

来源

2011-02-16 21:19:37 Neil

更改每个单词的第一个字母的值

回答

相关问题