Supprimer voyelles et espaces dans une <input> [Résolu]

Signaler
Messages postés
9
Date d'inscription
mardi 3 avril 2018
Statut
Membre
Dernière intervention
20 avril 2018
 -
BunoCS
Messages postés
14711
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
24 janvier 2020
 -
Bonjour,
je souhaite pour un travail de recherche, trouver de l'aide pour un script qui peut m'aider à supprimer toutes les voyelles (a,e,i,u,o,y) puis espaces vides dans une <input> après appui sur un bouton. Donc si par exemple je rentre "azertyuiop" dans le <input>, le résultat après click sur le bouton deviens "zrtp". J'ai des connaissances en html / css mais alors en javascript je suis une vrai quiche pour l'instant...
Admettons: 

<html>
    <head>
        <title></title>
 
        <script type="text/javascript">
        </script>

    </head>
    <body>

        <input id="inputbox01" width="50px;">
        <input type="button" value="Enlever voyelles" onclick="" />

    </body>
</html>


Je remercie les éventuels codeurs de vôtre aide!

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ICI

Merci d'y penser dans tes prochains messages.
Afficher la suite

3 réponses

Réponse 1 / 3
Messages postés
14711
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
24 janvier 2020
 90
Bonjour,

Alors, t'aider, oui, ça doit être faisable. Par contre, faire le travail à ta place, non ;)

Signaler
Tri4L
Messages postés
9
Date d'inscription
mardi 3 avril 2018
Statut
Membre
Dernière intervention
20 avril 2018
Merci BunoCS de ta réponse, je comprends. Je n'y connais rien mais j'imagine que la première étape est de créer une variable (ou fonction?) qui récupère le contenu de "l'input".
Genre quelque chose comme ça:
Je créer une fonction que je nomme "mafonction", dans celle-ci je créer une variable que j'associe au contenu de l'input (id="inputbox01").
Je paramètre mon bouton pour lancer "mafonction" lors du click.
Mon raisonnement est t'il correct jusque-là? (Ceci est mon tout premier script!) 

<html>
    <head>
        <title></title>
 
        <script type="text/javascript">
            function mafonction()
        {
            var mavariable = document.getElementById("inputbox01").value;
            ...
        }   
        </script>
    </head>
    <body>

        <input type="text" id="inputbox01" width="50px;">
        <input type="button" value="Enlever voyelles" onclick="mafonction()" />

    </body>
</html>
Réponse 2 / 3
Messages postés
14711
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
24 janvier 2020
 90
Il te faut quelques bases en Javascript, oui: variables et fonctions.
Ensuite, il faudra répondre à la question suivante: "comment récupérer le contenu d'un input ?"
Puis, celle-ci: "comment supprimer des caractères d'une chaine de caractère ?"
Et enfin: "que faire avec le résultat ?"

Pour répondre aux 2 premières questions, quelques petites recherches rapides t'aideront. Pour la dernière, à toi d'y répondre ;)
Réponse 3 / 3
Messages postés
9
Date d'inscription
mardi 3 avril 2018
Statut
Membre
Dernière intervention
20 avril 2018
Ok, ensuite j'utilise la méthode "replace()" pour répondre a l'étapes suivantes cad, "comment supprimer des caractères d'une chaine de caractère ?" Le résultat est immédiat dans le <input> : 

<html>
<head>
<title></title>

<script type="text/javascript">
function mafonction()
{
var mavariable = document.getElementById("inputbox01").value;
var res = mavariable.replace("a", "");                            
 document.getElementById("inputbox01").value = res;
}
</script>

</head>
<body>
<input type="text" id="inputbox01" width="50px;">
<input type="button" value="Enlever voyelles" onclick="mafonction()" />
</body>
</html>
Afficher les 6 commentaires
Signaler
Tri4L
Messages postés
9
Date d'inscription
mardi 3 avril 2018
Statut
Membre
Dernière intervention
20 avril 2018
Au passage je rajoute un bouton effacer ce qui donne: 

<html>
  <head>
    <title></title>
    <script type="text/javascript">
function mafonction()
{
var mavariable = document.getElementById("inputbox01").value;
var res = mavariable.replace(/a/g, "");
document.getElementById("inputbox01").value = res;
}
 function effacer()
{
 document.getElementById("inputbox01").value="";
}
</script>
  </head>
  <body>
    <input type="text" id="inputbox01" width="50px;">
    <input type="button" value="Enlever voyelles" onclick="mafonction()" />
    <input type="button" value="Effacer" onclick="effacer()" />
  </body>
</html>
Signaler
Tri4L
Messages postés
9
Date d'inscription
mardi 3 avril 2018
Statut
Membre
Dernière intervention
20 avril 2018
Bon c'est là que je bloque:
Cette ligne supprime tous les "a" --> var res = mavariable.replace(/a/g,"");
Comment rajouter la suppression des autres lettres: e,u,i,y?
Signaler
BunoCS
Messages postés
14711
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
24 janvier 2020
 90
Soit tu fais une boucle pour chaque lettre à supprimer, soit tu utilises des expressions régulières.

Note: fais attention à bien rajouter les balises code (cf. ta question que j'ai modifiée)
Signaler
Tri4L
Messages postés
9
Date d'inscription
mardi 3 avril 2018
Statut
Membre
Dernière intervention
20 avril 2018
Ok trouvé, donc voici le code final: 

<html>
  <head>
    <title></title>
    <script type="text/javascript">
function mafonction()
{
var mavariable = document.getElementById("inputbox01").value;
var res = mavariable.replace(/a|e|i|o|u|y/g, "");

document.getElementById("inputbox01").value = res;
}
 function effacer()
{
 document.getElementById("inputbox01").value="";
}
</script>
  </head>
  <body>
   
   <input type="text" id="inputbox01" style="width: 50px;" >
    <input type="button" value="Code nostradamus" onclick="mafonction()" />
 <input type="button" value="Effacer" onclick="effacer()" />
  </body>
</html>


Vous devez vous demander l'utilité de ce script je pari!
Signaler
BunoCS
Messages postés
14711
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
24 janvier 2020
 90
Bien joué!
Si ton problème est résolu, merci de passer le topic en résolu (tout en haut, roue crantée,...)
Répondre Posez votre question