Textarea et Replace [Résolu]

Signaler
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013
-
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013
-
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

14 réponses

Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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;
}
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

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 !!!
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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.
<---------------------------------------------------------------------------------------------------------->
<html>
<head>
<title></title>
<style type="">
#source{
    width: 43%;
    height: 100%;
    float: left;
}
#myButton{
    width: 8%;
    height: 100%;
    float: left;
    margin-left: 30px;
    margin-right: 30px;
}
#destination{
    width: 43%;
    height: 100%;
    float: left;
}
</style>

<script src='prototype.js'></script>
<script language="javascript" type="text/javascript">
<!--
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}";
function haveFun(){
    var s = document.getElementById("source").value;
    s = s.gsub( reReservedKeys, tplReservedKeys);
    s = s.gsub( reComment, tplComment);
    s = s.gsub( reString, tplString);
    document.getElementById("destination").value = s;
}
-->
</script>

</head>

<textArea id='source'></textArea>

<textArea id='destination'></textArea>

</html>
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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;
}
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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.
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

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.
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

{X} cette balise définit-elle les espaces ?
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

Oups je viens de lire ton message, je vais voir si je trouves :p
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

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
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

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...
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

Un petit problème..

"Bonjour", "Bonjour" donne

"Bonjour", %color=darkred%"Bonjour"%%

Seul le dernier est coloré..
Messages postés
244
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
21 octobre 2013

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.