更改每個單詞的第一個字母的值

我試圖使用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

更改每個單詞的第一個字母的值

回答

相關問題