Cambiar el valor de la primera letra de cada palabra

Question

Estoy intentando utilizar jQuery, CSS o PHP para aumentar el tamaño de fuente de la primera letra de cada palabra en una cadena. Por ejemplo, voy a tener un título en las etiquetas h1, así:

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

Estoy queriendo texto transformar todo el texto en mayúsculas (no hay problema con el CSS), pero luego aumentar el tamaño de la fuente de la primera letra que aparece en la cadena. Con CSS o jQuery, ¿hay alguna manera de seleccionar la primera letra de cada palabra y modificarla?

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

He aquí un ejemplo de él en acción: http://jsfiddle.net/hCvsu/1/

Answer 2

La forma más sencilla es probablemente CSS sólo directamente, a pesar de que crea un poco de marcado extra para que usted pueda escribir. Sin embargo, JQuery terminaría haciendo la misma cantidad de marcado extra, con gastos adicionales, y fallaría sin el soporte de JS. h1.dropcaps div { flotante: izquierda; } h1.dropcaps div: first-letter { font-size: 300%; font-weight: bold; }

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

ACTUALIZACIÓN: Resulta: primera carta no funciona dentro de un elemento en línea en algunos navegadores.

El truco para arreglar esto es ponerlos en divs, y flotar los divs. He revisado mi marcado. http://jsfiddle.net/MBZaw/

Answer 3

no pude conseguir :first-letter a trabajar, pero aquí hay una posible solución, suponiendo que el <h1> no contiene etiquetas o entidades adicionales:

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

CSS:

.FirstLetter {color:green} 

Una posible beneficio aquí es que esto debería funcionar en todos los navegadores.
La expresión regular es bastante simple: \S representa un carácter que no es de espacio en blanco. Coincide palabra por palabra y captura la primera letra de cada palabra en el primer grupo ($1), y el resto de las letras en el segundo grupo ($2), para una fácil sustitución.

Ejemplo de trabajo: http://jsbin.com/ufovi4

Answer 4

solución Ajma funciona si usted tiene sólo un h1 en su página.

Esto funciona para todos 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)); 
    }); 

Posibles mejoras: en lugar de un lapso con un estilo, crear un lapso con una clase y no font-size: 200% en el CSS.

Posibles problemas: si su h1 contiene otras etiquetas (que no debería) esas etiquetas se pierden, solo se retiene el texto.

creo que sirve, Simone

Answer 5

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

Answer 6

Esto funcionará. Simplemente configure su CSS en h1 span {font-size: 125%}, o lo que sea.

$('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); 
});