Regex-Visual-Generator/index.php at main · FIicher/Regex-Visual-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<?php
// Générateur de regex + recherche automatique en temps réel
// Regex generator + real-time automatic search
?>


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<TITLE>🔍 Regex Visual Generator</TITLE>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

</head> <body class="bg-gray-900 text-white min-h-screen p-6 font-sans">

<div class="max-w-4xl mx-auto">
  <div class="text-center mb-6">
    <img src="https://dihu.fr/appgithub/iconedihu/9.png" width="120" class="mx-auto rounded-2xl mb-4">
    <h1 class="text-3xl font-bold mb-2">🔍 Regex Visual Generator</h1>
    <p class="text-gray-300">Écrivez ce que vous voulez capturer et obtenez une regex automatiquement avec explications.</p>

  </div>


  <br>

 <div align="center"><div class="w-full max-w-xl mb-4">
    <button id="showTypesBtn"
        class="w-full bg-indigo-600 hover:bg-indigo-700 transition p-3 rounded-lg text-white font-semibold">
        Voir tous les types de capture
    </button>
    <div id="typesList" class="hidden mt-3 p-3 bg-gray-800 rounded-lg text-gray-300 text-sm space-y-1">
        <p><b>Chiffres et nombres :</b></p>
        <p><b>Lettres et mots :</b> </p>
        <p><b>Dates et heures :</b></p>
        <p><b>Emails et contacts :</b></p>
        <p><b>URLs et liens :</b> </p>
        <p><b>Hashtags / mentions :</b></p>
        <p><b>Adresses IP :</b> IPv4: IPV6:</p>
        <p><b>Codes / identifiants :</b> Numéro carte:</p>
        <p><b>HTML / XML :</b> </p>
        <p><b>Fichiers / extensions :</b> </p>
        <p><b>Symboles spéciaux :</b> </p>
        <p><b>Texte entre délimiteurs :</b> </p>
        <p><b>Répétitions :</b> </p>
        <p><b>Langage naturel :</b></p>
        <p><b>Numéros spécifiques :</b> SIRET:  IBAN: </p>
    </div>
</div></div>

<script>
document.getElementById("showTypesBtn").addEventListener("click", function() {
    const list = document.getElementById("typesList");
    list.classList.toggle("hidden");
});
</script>

  <div class="bg-gray-800 p-6 rounded-xl shadow-xl mb-6">
    <label class="block mb-2 font-semibold">Langage naturel / éléments à capturer :</label>
    <textarea id="inputText" placeholder="Ex: Je veux capturer emails, numéros et URLs..."
              class="w-full h-32 p-3 rounded bg-gray-700 text-white outline-none focus:ring-2 focus:ring-blue-500"></textarea>

    <button onclick="generateRegex()" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 p-3 rounded-lg font-semibold text-lg transition">
      Générer Regex <i class="fa-solid fa-magic"></i>
    </button>
  </div>

  <div id="resultBox" class="hidden bg-gray-800 p-6 rounded-xl shadow-xl mb-6">
    <label class="block mb-2 font-semibold">Regex générée :</label>
    <textarea id="outputRegex" class="w-full h-24 p-3 rounded bg-gray-700 text-white outline-none focus:ring-2 focus:ring-green-500"></textarea>
    <button onclick="copyResult()" class="mt-3 w-full bg-green-600 hover:bg-green-700 p-3 rounded-lg font-semibold">
      Copier <i class="fa-solid fa-copy"></i>
    </button>

    <div class="mt-4">
      <label class="block mb-2 font-semibold">Explications :</label>
      <ul id="explanations" class="list-disc pl-5 text-gray-300"></ul>
    </div>

    <div class="mt-4">
      <label class="block mb-2 font-semibold">Testez votre regex :</label>
      <textarea id="testText" placeholder="Collez du texte ici..."
                class="w-full h-24 p-3 rounded bg-gray-700 text-white outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
      <button onclick="testRegex()" class="mt-2 w-full bg-yellow-600 hover:bg-yellow-700 p-2 rounded-lg font-semibold">
        Tester <i class="fa-solid fa-play"></i>
      </button>
      <div id="testResult" class="mt-2 text-green-400 font-semibold"></div>
    </div>
  </div>
</div>

<script>
// Dictionnaire de motifs
const patterns = {
  "chiffres": {regex: "\\d", desc: "Chiffre (0-9)"},
  "nombre": {regex: "\\d+", desc: "Nombre entier"},
  "decimal": {regex: "\\d*\\.\\d+", desc: "Nombre décimal"},
  "code_postal": {regex: "\\b\\d{5}\\b", desc: "Code postal 5 chiffres"},

  "lettre": {regex: "[a-zA-Z]", desc: "Lettre alphabétique"},
  "mot": {regex: "\\w+", desc: "Mot (lettres, chiffres, underscore)"},
  "mot3": {regex: "\\b\\w{3,}\\b", desc: "Mot de 3 lettres ou plus"},

  "date_ddmmyyyy": {regex: "\\d{2}/\\d{2}/\\d{4}", desc: "Date format dd/mm/yyyy"},
  "date_iso": {regex: "\\d{4}-\\d{2}-\\d{2}", desc: "Date format yyyy-mm-dd"},
  "heure": {regex: "\\d{2}:\\d{2}(:\\d{2})?", desc: "Heure HH:MM ou HH:MM:SS"},

  "email": {regex: "[\\w.+-]+@[\\w-]+\\.[\\w.-]+", desc: "Adresse email"},
  "telephone": {regex: "\\+?\\d{1,3}?[-.\\s]?\\(?\\d{1,4}?\\)?[-.\\s]?\\d{1,4}[-.\\s]?\\d{1,9}", desc: "Numéro de téléphone"},

  "url": {regex: "https?:\\/\\/[^\s]+", desc: "Lien HTTP/HTTPS"},
  "www": {regex: "www\\.[^\s]+", desc: "Lien www"},
  "ftp": {regex: "ftp:\\/\\/[^\s]+", desc: "Lien FTP"},

  "hashtag": {regex: "#\\w+", desc: "Hashtag"},
  "mention": {regex: "@\\w+", desc: "Mention"},

  "ipv4": {regex: "\\b(?:\\d{1,3}\\.){3}\\d{1,3}\\b", desc: "Adresse IPv4"},
  "ipv6": {regex: "([0-9a-fA-F]{0,4}:){2,7}[0-9a-fA-F]{0,4}", desc: "Adresse IPv6"},

  "carte": {regex: "\\b\\d{4}[- ]?\\d{4}[- ]?\\d{4}[- ]?\\d{4}\\b", desc: "Numéro de carte"},
  "vin": {regex: "[A-HJ-NPR-Z0-9]{17}", desc: "VIN (voiture)"},

  "html": {regex: "<([a-z]+)([^>]*?)>(.*?)<\\/\\1>", desc: "Balise HTML avec contenu"},
  "img": {regex: "<img [^>]*src=\"([^\"]+)\"[^>]*>", desc: "URL d'une image"},

  "fichier": {regex: "\\b\\w+\\.(jpg|png|gif|pdf|docx)\\b", desc: "Fichiers avec extension"},
  "js": {regex: "[^\\/]+\\.js", desc: "Fichiers JavaScript"},

  "espace": {regex: "\\s", desc: "Espaces, tabulations, sauts de ligne"},
  "non_espace": {regex: "\\S", desc: "Tout sauf espace"},
  "any": {regex: ".", desc: "Tout caractère sauf saut de ligne"},
  "parentheses": {regex: "[\\[\\]{}()]", desc: "Parenthèses, crochets, accolades"},
  "symbols": {regex: "[!@#$%^&*(),.?\":{}|<>]", desc: "Symboles spéciaux"},

  "quote_double": {regex: "\"([^\"]*)\"", desc: "Texte entre guillemets"},
  "quote_single": {regex: "'([^']*)'", desc: "Texte entre apostrophes"},
  "parenth_text": {regex: "\\((.*?)\\)", desc: "Texte entre parenthèses"},

  "repeat_abc": {regex: "(abc)+", desc: "abc répété 1 ou plusieurs fois"},
  "repeat_abcd": {regex: "(ab|cd){2,4}", desc: "ab ou cd répété 2 à 4 fois"},

  "maj": {regex: "\\b[A-Z][a-z]+", desc: "Mot commençant par une majuscule"},
  "articles": {regex: "\\b(?:le|la|les|un|une)\\b", desc: "Articles définis / indéfinis"},

  "siret": {regex: "\\b\\d{3} \\d{3} \\d{3} \\d{5}\\b", desc: "Numéro SIRET"},
  "iban": {regex: "[A-Z]{2}\\d{2}[A-Z0-9]{1,30}", desc: "IBAN"}
};

function generateRegex() {
    const input = document.getElementById('inputText').value.toLowerCase();
    let regexes = [];
    let explanations = [];
    for (let key in patterns) {
        if(input.includes(key)) {
            regexes.push(patterns[key].regex);
            explanations.push(`<li>${patterns[key].desc} → <code>${patterns[key].regex}</code></li>`);
        }
    }
    if(regexes.length === 0){
        alert("Aucun élément reconnu. Essayez de mentionner: email, url, chiffres, date, etc.");
        return;
    }
    const combined = regexes.join("|");
    document.getElementById('outputRegex').value = combined;
    document.getElementById('explanations').innerHTML = explanations.join("");
    document.getElementById('resultBox').classList.remove('hidden');
}

function copyResult() {
    let out = document.getElementById("outputRegex");
    out.select();
    out.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(out.value);
}

function testRegex() {
    let regexVal = document.getElementById("outputRegex").value;
    let text = document.getElementById("testText").value;
    if(!regexVal) return;
    try {
        const reg = new RegExp(regexVal, "g");
        const matches = text.match(reg);
        document.getElementById("testResult").innerHTML = matches ? matches.join(", ") : "Aucune correspondance";
    } catch(e) {
        document.getElementById("testResult").innerHTML = "Regex invalide";
    }
}
</script>

</body>
</html>