Discussion :

[oceane751]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Donc ici : mettre un CSS différent pour :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

@ericafustero

et pour

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

@treemelody

Puis un CSS différent pour :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Bovino]

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.

[kakashi99]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[oceane751]

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

[oceane751]

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?

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...

[SpaceFrog]

http://jsfiddle.net/d2tzsffb/

[oceane751]

Merci pour ta réponse SpaceFrog

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Merci encore!

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

[kakashi99]

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

[SpaceFrog]

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

[Watilin]

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.

[oceane751]

ok merci pour ces explications!