Textarea et ReplaceRésolu

Question

Bonjour, afin de créer une coloration syntaxique pour un site pmwiki, j'ai besoin de votre aide pour un script javascript !

En effet, je voudrais que dans un textaera, l'utilisateur entre son code vb brut (par exemple) :

Private sub Hello()
    For i=0 to 2 step 1
         MsgBox("Hello")
    Next i
End Sub

Et en cliquant sur un bouton, dans un deuxième textarea s'afficherait quelquechose comme :

%color=blue%Private%% %color=blue%Sub%% Hello() %color=green%'Un commentaire'%% 
-> %color=blue%For%% i = 0 %color=blue%to%% 2 %color=blue%step%% 1
-->%color=blue%MsgBox%%(%color=darkred%"Hello"%%)
-> %color=blue%Next%% i
%color=blue%End%% %blue%Sub%% 

-- Détails--

j'ai mis en rouge ce qui doit être ajouté pour que pmwiki puisse afficher ceci :

Private Sub Hello()
    For i = 0 to 2 step 1
        MsgBox("Hello")
    Next i
End sub

Résumé des tags :

-%color=blue%% Mon Texte %%// Donne la couleur du texte entre chaque '%%'
- -> // Permet de créer une indentation
- --> // Permet de créer une indentation plus forte

the_wwt · Accepted Answer

Bonjour,
en effet je m'étais totalement planté...
là c'est mieux...
Cordialement,
Pierrick

var reReservedKeys = /Private|Sub|For|To|Step|MsgBox|Next|End/;
var tplReservedKeys = "%blue%#{0}%%";

var reComment = /'[^']*'/;
var tplComment = "%green%#{0}%%";

var reString = /"[^"]*"/;
var tplString = "%darkred%#{0}%%";

var reIndent1 = / {4}/;
var tplIndent1 = "->";

var reIndent2 = / {8}/;
var tplIndent2 = "-->";

var reIndent3 = / {12}/;
var tplIndent3 = "--->";

var reIndent4 = / {16}/;
var tplIndent4 = "---->";
function haveFun(){
    var s = document.getElementById("source").value;
    s = s.gsub( reReservedKeys, tplReservedKeys)
        .gsub( reComment, tplComment)
        .gsub( reString, tplString)
        .gsub( reIndent4, tplIndent4)
        .gsub( reIndent3, tplIndent3)
        .gsub( reIndent2, tplIndent2)
        .gsub( reIndent1, tplIndent1);
    document.getElementById("destination").value = s;
}

tinux · Answer

J'ai pensé à une fonction comme ceci pour la coloration :

function ColorCode (texte) {

var reg = /Private|Sub|For|To|Step|MsgBox|Next|End/;
texte = texte.replace(reg, "%blue%"&reg&"%%");

} 

Mais je ne vois toujours pas comment traduire :

- un '   ' en '->'
- un '       ' en '-->'
- colorer en vert tout ce qui commence par un ' et finit par un '
- colorer en darkred tout ce qui commence par un " et finit par un "

De même, je ne sait pas comment appeler la fonction depuis un bouton, executer la fonction sur le premier textarea et afficher le resultat dans le second..

Bref, je ne m'y connait pas du tout en java et donc j'aurais grand besoin d'aide !

Un grand Merci à vous !!!

the_wwt · Answer

Bonjour, J'ai testé ce bout de code, pour les trois reg exp (keysWord, comment, string) mais avec la librairie prototype dispobible ici ( c'est bien plus élégant). Je bosse sur les indentaions et j'ai une question: Y a t'il autant de tiret que d'espaces? - exemple: ' ' donne -> ' ' donne --> ' ' donne --> Cordialement, Pierrick. <---------------------------------------------------------------------------------------------------------->

the_wwt · Answer

Sinon, c'est tout simplement cela:
var reReservedKeys = /Private|Sub|For|To|Step|MsgBox|Next|End/;
var tplReservedKeys = "%blue%#{0}%%";

var reComment = /(.*)('.*')(.*)/;
var tplComment = "#{1}%green%#{2}%%#{3}";

var reString = /(.*)(".*")(.*)/;
var tplString = "#{1}%darkred%#{2}%%#{3}";

var reIndent1 = /(.*)( {3})(.*)/;
var tplIndent1 = "#{1}->%#{3}";

var reIndent2 = /(.*)( {7})(.*)/;
var tplIndent2 = "#{1}-->%#{3}";
function haveFun(){
    var s = document.getElementById("source").value;
    s = s.gsub( reReservedKeys, tplReservedKeys)
        .gsub( reComment, tplComment)
        .gsub( reString, tplString)
        .gsub( reIndent2, tplIndent2)
        .gsub( reIndent1, tplIndent1);
    document.getElementById("destination").value = s;
}

the_wwt · Answer

Oups y a une erreur dans les templates des indentations...
Je te laisse la chercher... C'est le signe pour une fraction dont le dénominateur est 100.
Cordialement,
Pierrick.

tinux · Answer

C'est vraiment du très joli travail, Félicitation !!

Alors pour les indentations, j'ai compté les 'espaces' depuis VS

En fait '->' correspond à une tabulation
          '-->' à deux etc..

Dans VS, une tabulation équivaut à 4 espaces.

tinux · Answer

{X} cette balise définit-elle les espaces ?

tinux · Answer

Oups je viens de lire ton message, je vais voir si je trouves :p

the_wwt · Answer

En effet le nombre en accolade veut dire exactement n occurences.

Donc si c'est 4 et 8 remplace respectivement 3 et 7 par 4 et 8.

Fais réponse accéptée,

Cordialement,

Pierrick

tinux · Answer

Et bien merci,par contre faut que je bidouille encore un chouilla car par défaut VS Crée une tabulation..

Je m'explique au lieu d'avoir

Public ..
    Le code..

On a :

    Public
        Le code..

Donc faut que j'ajoute indent3 et 4 en plus du 1 et 2 avec 12 et 16.. :p

the_wwt · Answer

Bonsoir,
Je pense que ce n'est pas une bonne solution de rajouter autant de gsub que de nombre d'indentation possible.
Il faut automatiser cela, j'y planche demain.
Cordialement,
Pierrick

tinux · Answer

Merci, c'est vrai que c'est pas tip top la panoplie de gsub.. :p 

Surtout que le top serait d'interdire tous les autres espaces..

Par exemple :

-     Sources      ///    Résultat

- 1,2,3 espaces  ///    Il n'y a plus d'espaces dans le résultat
- 4 espaces       ///    Indentation, on supprime les espaces et on ajoute devant ->
- 5,6,7 espaces  ///    Il n'y a plus d'espaces dans le résultat
- 8 espaces       ///    Indentation, on supprime les espaces et on ajoyre devant -->

etc...

tinux · Answer

Un petit problème..

"Bonjour", "Bonjour" donne

"Bonjour", %color=darkred%"Bonjour"%%

Seul le dernier est coloré..

tinux · Answer

Bravo, c'est nickel (pour les indents, j'avais déjà simplifié comme vous l'avez fait :p) Par contre pour la coloration, je ne maitrise pas assez bien ce genre d'expressions.

C'est un grand service que vous m'avez rendu là, Merci.

Textarea et Replace

14 réponses

Votre réponse