Appliquer un css en fonction de la première lettre du mot

Bonjour à tous!

Comme le titre de mon post l'indique, j'aimerai attribuer du CSS, dans un paragraphe, en fonction du premier symbole d'un mot (par exemple @tremelody)

On m'a dit qu'en CSS se n'était pas possible alors me voici ;)

En gros, mon paragraphe :

Code:

---

1 2	@ericafustero Why thank you. Your work looks awesome by the way! @treemelody

---

Donc ici : mettre un CSS différent pour :

Code:

---

@ericafustero

---

et pour

Code:

---

@treemelody

---

Puis un CSS différent pour :

Code:

---

Why thank you. Your work looks awesome by the way!

---

J'ai vu fisrt-letter, mais c'est pas ça que je veux..

Je souhaite dire que si le mot commence par "@", un CSS différent s'applique..


J'ai tenté un

Code:

---

1 2 3 4 5 6

$(document).ready(function() { $("footer p:contains('@')").each(function() { alert($(this).text()); }); });

---

Mais il me renvoi tout le "p" et non les mots qui contiennent "@"
J'espère avoir été clair ;)

Donnez moi juste une piste ! :)

Merci d'avance pour votre aide !

Citation:

---

Mais il me renvoi tout le "p" et non les mots qui contiennent "@"

---

Dans la mesure où c'est précisément ce qu'est supposé faire le code que tu montres, ça semble assez logique en effet...

Ensuite, il y a une notion que tu sembles ne pas avoir intégrée : les styles CSS s'appliquent au contenu d'une balise donnée, pas à un mot spécifique... Il faudra donc, à un moment ou à un autre, utiliser une balise pour encadrer les mots ciblés si tu veux leur donner un style.
Ensuite, ton contenu, il vient d'où au juste ?
Parce que le plus simple, ce sera très certainement de cibler les mots choisis à la construction de la page.

heu question bête mais... pourquoi tu ne fais pas ça tout simplement ?

Code:

---

1 2	<span class="style1">@ericafustero</span> Why thank you. Your work looks awesome by the way! <span class="style2">@treemelody</span>

---

Oui et cette idée fonctionnerai!
Mais je voulais utiliser du jquery pour m'approprier un peu plus ce langage ;)

Citation:

---

Envoyé par Bovino

Ensuite, il y a une notion que tu sembles ne pas avoir intégrée : les styles CSS s'appliquent au contenu d'une balise donnée, pas à un mot spécifique... Il faudra donc, à un moment ou à un autre, utiliser une balise pour encadrer les mots ciblés si tu veux leur donner un style.

---

ah donc je devrai créer des span et leur donner une classe, par exemple c'est ça?
Donc j'abandonne jquery?

Citation:

---

Envoyé par Bovino

Ensuite, ton contenu, il vient d'où au juste ?
Parce que le plus simple, ce sera très certainement de cibler les mots choisis à la construction de la page.

---

Ce contenu vient d'un psd boostrap

Pour l'instant je ne l'ai testé que sous FF...

http://jsfiddle.net/d2tzsffb/

Merci pour ta réponse SpaceFrog :D

Code:

---

1 2 3

$(function(){ $('#foo').html( function(){return $(this).html().replace(/(@\w+)/g, "<span class='s'>$1</span>")}) })

---

Mais il y a un bout de code que je ne comprends pas

Code:

---

replace(/(@\w+)/g,

---

A quoi sert le w+ et le g... puis le replace(/(@\w+)/g (j'essaye de comprendre :mrgreen:)

Merci encore!

Je savais bien qu'avec jquery on pouvez avoir ce résultat ;)

explication des regexp : https://developer.mozilla.org/fr/doc...globaux/RegExp

j'opère a un remplacement de texte ...

@ = caractère @
\w = lettre d'un mot
+ = plusieurs fois

@\w+ = tout mot qui commence par @

() niveau de parenthèses de groupe de saisie

modifier /g = général (plusieurs occurrences)

le but étant de capter tout mot commençant par @

pour la partie remplacement:
$1 = premier niveau de parenthèses dans le pattern de capture

Citation:

---

Envoyé par oceane751

Je savais bien qu'avec jquery on pouvez avoir ce résultat ;)

---

Attention jQuery n'est pas un langage, c'est une bibliothèque JavaScript. Tout ce que tu peux faire avec jQuery, tu peux le faire aussi en JavaScript pur.

ok merci pour ces explications!