Forum : [jQuery] - Changer la couleur des balises dans un éléments code

Salut Mika445,

Je n'ai pas trop compris cette phrase :

Vu que ce n'est pas un vrai élément. Mais une valeur.

Ensuite,

comment faire en sorte, avec jquery de dire si ma regex a trouvé quelque chose tu la color comme ça ?

Je crois que j'ai mal compris mais,
est-ce que ce genre de code correspond à ce que tu cherches ?

// jQuery
var result = '/^ma_regexp$/';
if (result)
{
    $(' b ').removeClass();
    $(' b ').addClass('my_b');
}

// CSS
.my_b {
    ...
}

Laznet

Auteur

Bonjour,

Quand je dis que ce n'est pas un vrai élément c'est que le texte "analysé" par la regex est une value.
Et donc dans mon texte par exemple un code HTML standart j'aimerais savoir comment colorer la balise html (quand la regex a trouvé le couple).
etc..
Donc par exemple : balise html = couleur verte
balise <br> couleur bleu etc..

La difficulté du truc c 'est qu'on (je ne pense pas) ne peut pas styliser en CSS une value. (mise a part si on lui met des balises autour et qu'après ont les enlève mais bon ça fais un peu trop tricky je trouve.

Et pour te répondre :
Je ne sais pas trop si ce genre de code correspond a mes recherches.
Vu que d'après ce que je comprend il applique une classe particulière a un élément.
Mais comme dit plus, je cherche a styliser une partie de ma chaine de caractère.

Laznet

Auteur

Merci pour ta réponse,
Mais dans ce cas je pense que ça color tout le texte.

Donc toujours pour suivre mon exemple.
Ca mettrait en couleur tout le code HTML.
Et non la balise HTML ou balise B etc..

AlexJM

Il me semble que lorsqu'un éditeur fait de la coloration syntaxique, il met entoure une zone de code par une balise span qui permet de la styliser.
Exemple

<html>

</html>

Si ton code c'est ça, ton éditeur devrait faire par exemple :

<span class="tag"><html></span>

<span class="tag"></html></span>

sans oublier de changer les <> des balises avec leur valeurs html (&lt, &gt)

Laznet

Auteur

Bon je vais essayer un truc comme ça.

Par exemple chercher le mot html et si on le trouve mettre deux span autour de lui.

Mais est ce que ce sera interprété comme valeur ou comme élement ?

AlexJM

Ah attend, j'ai vu autre chose, il faut que tu fasses un div, et c'est dans ce div que tu auras le rendu une fois modifié

Ensuite si tu veux vraiment avoir un éditeur, tu dois faire en sort que le div se comporte comme un textaréa (il me semble avoir compris ceci)

Laznet

Auteur

Mais le but ce n'est pas d'afficher le bloc dans la page hein ^^. Juste de changer sa couleur en fonction de ce que c'est.
Et justement (peut être que je me répète) mon interrogation c'est comment colorer ce mot alors qu'il n'existe pas dans le DOM. Donc on ne peut pas lui appliquer d'effet CSS.
Et le truc c'est qu'avec une span, bah je ne sais pas si elle comptera comme un élément utilise dans le DOM ou quelle sera afficher comme valeur avec les autres.

Sinon si quelqu'un a déjà fait une coloration syntaxique et a des astuces je veux bien.

AlexJM

C'est dans un textarea ou dans un div ?

Laznet

Auteur

Pour mes tests j'envois le code dans un textarea et je l'affiche dans une balise code :D

AlexJM

Si c'est pour l'affichage dans la balise code tu peux faire comme je t'ai dit ici https://www.grafikart.fr/forum/topics/23107#p92954

Laznet

Auteur

Ouais tu as raison dans le cas ou il y a une balise dans le code XD (Je sais que je suis chiant). Mais comment ferais-tu (comme le fais par exemple Grafikart ici) pour colorer chaque balise d'un code ?

AlexJM

Alors par exemple, tu mets la balise .code--tag à chaque span, et .code--{{le nom de la balise}} pour pouvoir faire du formattage particulier
Ensuite tu as juste à avoir un tableau de balises genre

 [{tag: 'html'}, {tag: 'p'}, {'tag': 'br', 'self-closing': true}]

Etc (j'ai mis un array d'objets et pas de string pour pouvoir mettre des options, si tu veux faire un truc plus complet, par exemple "self-closing" pour les balises auto-fermantes comme <br/>)
Ensuite, sur base de ce tableau tu peux faire une regex, par exemple :

/<((?:\/?html)|(?:\/?p)|(?:br\/))>/

(à toi de l'améliorer pour accepter les attributs, les espaces...)
Et après tu remplaces avec la regex, par exemple si elle trouve

</html>

Tu vois dans le premier groupe que ca commence avec un / donc c'est une balise de fin, et que la balise c'est html, donc tu remplaces en :

<span class="code--tag code--html code--end"></html></span>

(j'ai mis code--end pour montrer que c'est une fermeture, tu n'es pas obligé)
J'espère avoir été clair :)

Laznet

Auteur

Je vois dans ta regex que tu cherches plusieurs balises.
Comment déterminer celle qu'elle a trouvé ? (à moins que soit juste pour l'exemple).

AlexJM

Justement je mets toutes les balises dans une seule regex pour ne pas devoir parcourir le tableau à chaque fois, le tableau sers juste à générer la regex mais tu peux la faire à la main aussi
Tu peux connaitre la balise que tu as recherché via les groupes entres parenthèses ;)
Je t'invite à voir ici http://stackoverflow.com/questions/7192436/javascript-passing-a-function-with-matches-to-replace-regex-funcarg-doesn
Et ici http://regexr.com/, dans "reference" et "cheatsheet", tu as beaucoup d'informations sur les regex ;)

Laznet

Auteur

J'ai fais quelque test avec ta regex, elle envoit le résultat dans la variable "res".
Quand elle a trouvé quelque chose elle m'affiche dans ma console un tableau.
Comment l'exploiter ? J'en reviens a la question principal de ce post. Comment colorer en fonction de la balise ?
Avec une condition ?
Si resultat = </html> appliquer tel couleur a la span.

D'ailleurs, je ne peux pas utiliser les parenthèses capturante "Non capturing group".

AlexJM

Je vais t'expliquer la regex quej 'ai fait pour te montrer, peut-être que tu comprendras :

/<((?:\/?html)|(?:\/?p)|(?:br\/))>/

Alors, le premier <, toutes les balises commencent par un <
Ensuite, j'ouvre une ( pour ouvrir un groupe (capture group) (1)
Ensuite, j'ouvre une (?: pour permettre de faire les "ou" (2), mais pas besoin d'un "capture group" parce que le groupe (1) nous dira déjà la balise
Ensuite je met le \/, c'est le / sauf qu'il faut l'échapper
Ensuite je met un ?, parce que c'est pas obligatoire qu'il y ait un /, c'est juste si c'est une balise fermante
Ensuite j'écris html
Et la je ferme la parenthèse ouverte en (2)
Je fais mon "ou"
Ensuite c'est pareil que pour le html sauf que c'est un paragraphe
Je fais un autre "ou"
Ensuite, j'ouvre une (?:, toujours pour permettre de faire les "ou" (3)
Ensuite j'écris br
Ensuite je met le \/ du br/
Ensuite je ferme la parenthèse ouverte en (3)
Ensuite je ferme la parenthèse ouverte en (1)
Ensuite je ferme la balise avec le >

Et pour ce qui est de comment savoir quelle sera ta balise, voici comment ca fonctionne :
"string".replace(/st(ring)/, function (match, capture) { return 'gold ' + capture + '|' + match;}); // "gold ring|string"

Laznet

Auteur

Donc en faite je peux utiliser le premier "capture group" pour mes balises.
Mais donc comment dire dans ce capture groupe tu prend tel balise.
Comme les tableaux avec la clé (chiffre) associé ?

AlexJM

Le capture group prendra tout ce qu'il peut trouver à l'intéreiur, mais comme tu as un "ou", tu auras soit html soit p soit br

[jQuery] - Changer la couleur des balises dans un éléments code

18 réponses