Discussion :

[abdouccu]

Bonjour,

SVP es ce que quelqu'un peu m'aider, je voudrais colorer les additionnelle infos d'une page WEB qui est sous forme de tableau, comme le montre le lien suivant
http://www.itftennis.com/ITF/Web/Use...nisCateCode=MT

je veux faire sortir le font de couleur sous le '' [1], (Q), (wc), (Q)", Par exemple le rouge qui sont visible à la fin de chaque ligne

MERCI beaucoup

[Watilin]

On dirait que tu as besoin d'un userscript

Pour commencer je peux te donner un script que tu peux exécuter dans la console, ou bien transformer en bookmarklet. Mais peut-être que si tu installes et découvres Greasemonkey tu trouveras ça plus pratique.

Bon alors, par où commencer. Si on regarde la structure de la page, on voit que les éléments qui t'intéressent sont des bouts de texte dans des <span class="flagLeft"> En utilisant un sélecteur CSS, ça donnerait : span.flagLeft. On peut donc obtenir une collection de ces éléments en appellant cette fonction :

Code :

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

document.querySelectorAll("span.flagLeft");

On va également se garder les expressions qui t'intéressent ( [1], (Q), (wc), (Q) ) au début du code d'une manière facile à modifier, par exemple un tableau :

Code :

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

var expressions = ["[1]", "(Q)", "(WC)"];

Avec tout ça, il ne nous reste plus qu'à itérer sur notre collection de spans. Pour ça, les tableaux ont une méthode bien pratique : forEach. Malheureusement, une collection n'est pas un tableau, il faut donc ruser en utilisant le prototype des tableaux :

Code :

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

1
2
3
Array.prototype.forEach.call(document.querySelectorAll("span.flagLeft"), function( span ){
   ...
});

Nous avons à présent à coder une fonction qui sera appelée sur chaque span. À chaque fois, il faut vérifier si le span contient chacune des expressions qu'on a définies. Tu connais la fonction indexOf ?

Code :

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

1
2
3
4
5
   expressions.forEach(function( expr ){
      if (span.textContent.indexOf(expr) > -1) {
         ...
      }
   });

Là c'est la partie la plus technique. Il faut créer un nouveau span à fond rouge, y ajouter l'expression qui correspond, puis l'ajouter au span flagLeft.

Et enfin ne pas oublier de retirer l'expression du span flagLeft, sinon il y aurait doublon. Pour ça il y a un petit piège, car si on redéfinit un textContent, c'est tout le contenu du span qui est « aplati » en texte, et les liens disparaissent. Il faut agir finement et sélectionner explicitement les nœuds texte et modifier leur attribut data.

Code :

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

1
2
3
4
5
6
7
8
         var spanRouge = document.createElement("span");
         spanRouge.style.background = "red";
         spanRouge.textContent = expr;
 
         var spanText = span.lastChild;
         spanText.data = spanText.data.replace(expr, "");
 
         span.appendChild(spanRouge);

Voilà, je t'ai donné tous les éléments, à toi de recoller les bouts ensemble !