Recherche http: ou https: dans url

**Romenag** · 26/06/2017, 12h07

Bonjour � tous !

Je d�bute dans le d�veloppement en suivant des cours en ligne avant de commencer un BTS SIO en septembre.

Pour l'un de mes TP je dois r�aliser un formulaire qui permet d'ajouter des liens � une liste.
J'ai quasiment fini mais je bloque sur un point :
Si l'url saisis ne commence pas par "http://" ou "https://", je dois lui ajouter automatiquement "http://".

On a survol� les expressions r�guli�res dans le cours et du coup c'est vraiment la premi�re fois que j'essaie d'en utiliser...

J'ai essay� �a (je ne vous mets que le bout de code car le TP est un peu long):

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
if (newLien.value !== /https?:\/\/.+.\..+/) {
   e.preventDefault;
   newLien.value = "http://" + newLien.value;
}

Mais bon a priori c'est pas bon, car cela m'ajoute bien le "http://" mais cela le fait � chaque fois que je clique sur "ajouter le lien" au lieu d'ajouter le lien � liste une bonne fois pour toute une fois le "http://" incrust� dans l'url.

Je ne sais pas si je m'exprime bien... si jamais je suis pas claire dites le moi !
Je rappelle que je d�bute cela fait juste quelques semaine que je m'int�resse au d�veloppement :-)

Merci d'avance pour votre aide !

**toulousain3117** · 26/06/2017, 12h15

tu dois creer un fichier .htaccess et le mettre a la racine de ton site

par exemple moi quand il y a pas le http ou https je fais :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.monsite.com/$1 [R,L]

**Romenag** · 26/06/2017, 12h43

Merci pour ta r�ponse mais en faite je n'ai pas du �tre tr�s claire. Ce n'est pas pour un site, c'est juste un TP qui n'est m�me pas en ligne. En fait le but est simplement d'ajouter de nouveaux liens � une liste de liens gr�ce � un formulaire qui propose de saisir : le pseudo, le nom du lien et l'url.

Je vais donc mettre mon code JS en entier pour que vous compreniez mieux (�a coince de la ligne 162 � 166) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
//Pour TP2 ajout d'une fonction permettant de réutiliser cette partie de code pour l'affichage des nouveaux liens :
function affichageDesLiens(){
    listeLiens.forEach(function (liste) {
 
        //Création et modification de la Div contenant les liens :
 
        var divElt = document.createElement("div");
        divElt.style.paddingTop = "20px";
        divElt.style.marginTop = "30px";
        divElt.classList.add("lien");
 
        // Création et modification de l'élément titre
        var titreElt = document.createElement("a");
 
        titreElt.textContent = liste.titre;
        titreElt.style.color = "#428bca";
        titreElt.href = liste.url;
        titreElt.style.fontWeight = "bold";
        titreElt.style.textDecoration = "none";
        titreElt.style.fontSize = "1.5em";
        titreElt.style.paddingTop = "20px";
        titreElt.target = "_blank";
 
 
        //Création et modification de l'élément url :
        var urlElt = document.createElement("span");
 
        urlElt.textContent = liste.url;
        urlElt.style.paddingTop = "26px";
        urlElt.style.paddingLeft ="20px";
 
 
        //Création et modification de l'élément auteur :
 
        var auteurElt = document.createElement("div");
 
        auteurElt.textContent = "Ajouté par : " + liste.auteur;
        auteurElt.style.paddingTop = "20px";
        auteurElt.style.paddingBottom = "20px";
        auteurElt.style.fontSize = "80%";
 
        //Afficher les liens :
 
        divElt.appendChild(titreElt);
        divElt.appendChild(urlElt);
        divElt.appendChild(auteurElt);
        document.getElementById("contenu").appendChild(divElt);
 
        return divElt;
    });
 
}
 
affichageDesLiens();
 
//TP2 :
 
// Ajoute un bouton :
 
var divBouton = document.createElement("div");
divBouton.style.marginTop = "20px";
var bouton = document.createElement("button");
bouton.textContent = "Ajouter un lien";
bouton.style.fontSize = "0.6em";
bouton.id = "bouton";
 
divBouton.appendChild(bouton);
document.querySelector("h1").appendChild(divBouton);
 
 
 
//Au moment du clic :
 
bouton.addEventListener("click", function () {
 
    divBouton.removeChild(bouton); //Efface le bouton
 
    //Creation du formulaire :
    var formElt = document.createElement("form");
 
    //pseudo :
 
    var pseudo = document.createElement("input");
    pseudo.name = "pseudo";
    pseudo.type = "text";
    pseudo.placeholder = "Quel est ton pseudo ?"
    pseudo.style.fontSize = "0.5em";
    pseudo.setAttribute("required", "required");
 
    //nom du lien :
 
    var nomLien = document.createElement("input");
    nomLien.name = "nomLien";
    nomLien.type = "text";
    nomLien.placeholder = "Nomme ton lien :";
    nomLien.style.fontSize = "0.5em";
    nomLien.size = "40"
    nomLien.setAttribute("required", "required");
    nomLien.style.marginLeft = "10px";
 
    //url du lien : 
 
    var newLien = document.createElement("input");
    newLien.type = "url";
    newLien.name = "newLien";
    newLien.setAttribute("required", "required");
    newLien.style.marginLeft = "10px";
    newLien.placeholder = "Quel est l'url de ton lien ?"
    newLien.style.fontSize = "0.5em";
    newLien.size = "70";
 
    var ajouter = document.createElement("button");
    ajouter.type = "button";
    ajouter.textContent = "Ajouter";
    ajouter.style.fontSize = "0.6em";
    ajouter.style.marginLeft = "10px";
 
 
    //Ajout du formulaire :
 
    formElt.appendChild(pseudo);
    formElt.appendChild(nomLien);
    formElt.appendChild(newLien);
    formElt.appendChild(ajouter);
    divBouton.appendChild(formElt);
 
 
    //Ajouter le lien :
 
    ajouter.addEventListener("click", function (e) { 
 
 
        listeLiens.unshift({titre:nomLien.value , url:newLien.value , auteur:pseudo.value}); // Ajoute le nouveau lien au début de la liste;
 
        document.getElementById("contenu").innerHTML = ""; // Suppression de la div "contenu";
 
        if ((nomLien.value === "") || (pseudo.value === "") || (newLien.value === "")) {
            alert("Vous n'avez pas rempli tout les champs !");
            e.preventDefault;
        }
 
        /* C'est là que ça coince :
        else if (newLien.value !== /https?:\/\/.+.\..+/) {
                e.preventDefault;
                newLien.value = "http://" + newLien.value;
        } */
        else {
            affichageDesLiens();
            divBouton.removeChild(formElt);
            divBouton.appendChild(bouton);
        }
 
    });
});

Tu vois ce que je veux faire du coup ?
En fait, simplement ajouter le http:// dans le formulaire puis quand je clic de nouveau sur ajouter cela ajoute le lien � la liste.

Si �a peut vous aider, voici l'image de mon TP :

Nom : 14984735719534_image2.jpeg
Affichages : 191
Taille : 60,1 Ko

Nom : 14984735719534_image2.jpeg
Affichages : 191
Taille : 60,1 Ko

**Romenag** · 26/06/2017, 14h06

J'ai beau y r�fl�chir en relisant diff�rents cours, je pense que mon expression r�guli�re est correcte.

C'est dans ma condition que �a coince je pense.

En fait, apr�s l'ajout automatique du "http://" si je clic une nouvelle fois sur valider, cela n'ajoute pas le lien � la liste mais ajoute encore une fois "http://" au d�but de mon url.

Comment je peux r�gler �a ?

**paoli121** · 26/06/2017, 14h35

essaie ceci dans ton js pour voir :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
<script>
        // je considère ton newLien.
	var true_url = newLien.value,reg = new RegExp("^(http://|https://)[a-zA-Z0-9.-_]+$");
 
	if(!reg.test(true_url) ){
		true_url = "http://"+true_url;
	}
	alert(true_url);
</script>

**Romenag** · 26/06/2017, 16h13

Nom : imageforum.jpg
Affichages : 157
Taille : 138,1 Ko

Voil� du coup j'ai supprim� ma partie de code et ajout� la tienne donc le lien s'ajoute mais comme tu vois cela n'ajoute pas le http:// au d�but de l'url dans la liste de lien alors qu'avec alert(), il est pris en compte...

**toulousain3117** · 26/06/2017, 17h02

�a doit etre peut etre car les deux true_url on la m�me nom

essaye �a (c'est une hypothese)

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
<script>
        // je considère ton newLien.
	var true_urls = newLien.value,reg = new RegExp("^(http://|https://)[a-zA-Z0-9.-_]+$");
 
	if(!reg.test(true_url) ){
		true_url = "http://"+true_urls;
var true_url = newLien.value('true_url');
	}
	alert(true_url);
</script>

**NoSmoking** · 26/06/2017, 17h18

Bonjour,

mais comme tu vois cela n'ajoute pas le http:// au d�but de l'url dans la liste de lien alors qu'avec alert(), il est pris en compte...

tu ne r�affectes pas la valeur

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

newLien.value = true_url;

**Romenag** · 26/06/2017, 17h33

Je m'en sors pas !!!

Est-ce qu'au moins j'ai fais ce que vous me dites correctement ?
Je vous poste mon dernier essai (mais j'ai tourn� �a dans tout les sens �a veut pas fonctionner...) :

(� partir de la ligne 159)

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
// TODO : compléter ce fichier pour ajouter les liens à la page web
 
//Pour TP2 ajout d'une fonction permettant de réutiliser cette partie de code pour l'affichage des nouveaux liens :
function affichageDesLiens(){
    listeLiens.forEach(function (liste) {
 
        //Création et modification de la Div contenant les liens :
 
        var divElt = document.createElement("div");
        divElt.style.paddingTop = "20px";
        divElt.style.marginTop = "30px";
        divElt.classList.add("lien");
 
        // Création et modification de l'élément titre
        var titreElt = document.createElement("a");
 
        titreElt.textContent = liste.titre;
        titreElt.style.color = "#428bca";
        titreElt.href = liste.url;
        titreElt.style.fontWeight = "bold";
        titreElt.style.textDecoration = "none";
        titreElt.style.fontSize = "1.5em";
        titreElt.style.paddingTop = "20px";
        titreElt.target = "_blank";
 
 
        //Création et modification de l'élément url :
        var urlElt = document.createElement("span");
 
        urlElt.textContent = liste.url;
        urlElt.style.paddingTop = "26px";
        urlElt.style.paddingLeft ="20px";
 
 
        //Création et modification de l'élément auteur :
 
        var auteurElt = document.createElement("div");
 
        auteurElt.textContent = "Ajouté par : " + liste.auteur;
        auteurElt.style.paddingTop = "20px";
        auteurElt.style.paddingBottom = "20px";
        auteurElt.style.fontSize = "80%";
 
        //Afficher les liens :
 
        divElt.appendChild(titreElt);
        divElt.appendChild(urlElt);
        divElt.appendChild(auteurElt);
        document.getElementById("contenu").appendChild(divElt);
 
        return divElt;
    });
 
}
 
affichageDesLiens();
 
//TP2 :
 
// Ajoute un bouton :
 
var divBouton = document.createElement("div");
divBouton.style.marginTop = "20px";
var bouton = document.createElement("button");
bouton.textContent = "Ajouter un lien";
bouton.style.fontSize = "0.6em";
bouton.id = "bouton";
 
divBouton.appendChild(bouton);
document.querySelector("h1").appendChild(divBouton);
 
 
 
//Au moment du clic :
 
bouton.addEventListener("click", function () {
 
    divBouton.removeChild(bouton); //Efface le bouton
 
    //Creation du formulaire :
    var formElt = document.createElement("form");
 
    //pseudo :
 
    var pseudo = document.createElement("input");
    pseudo.name = "pseudo";
    pseudo.type = "text";
    pseudo.placeholder = "Quel est ton pseudo ?"
    pseudo.style.fontSize = "0.5em";
    pseudo.setAttribute("required", "required");
 
    //nom du lien :
 
    var nomLien = document.createElement("input");
    nomLien.name = "nomLien";
    nomLien.type = "text";
    nomLien.placeholder = "Nomme ton lien :";
    nomLien.style.fontSize = "0.5em";
    nomLien.size = "40"
    nomLien.setAttribute("required", "required");
    nomLien.style.marginLeft = "10px";
 
    //url du lien : 
 
    var newLien = document.createElement("input");
    newLien.type = "url";
    newLien.name = "newLien";
    newLien.setAttribute("required", "required");
    newLien.style.marginLeft = "10px";
    newLien.placeholder = "Quel est l'url de ton lien ?"
    newLien.style.fontSize = "0.5em";
    newLien.size = "70";
 
    var ajouter = document.createElement("button");
    ajouter.type = "button";
    ajouter.textContent = "Ajouter";
    ajouter.style.fontSize = "0.6em";
    ajouter.style.marginLeft = "10px";
 
 
    //Ajout du formulaire :
 
    formElt.appendChild(pseudo);
    formElt.appendChild(nomLien);
    formElt.appendChild(newLien);
    formElt.appendChild(ajouter);
    divBouton.appendChild(formElt);
 
 
    //Ajouter le lien :
 
    ajouter.addEventListener("click", function (e) { 
 
 
        listeLiens.unshift({titre:nomLien.value , url:newLien.value , auteur:pseudo.value}); // Ajoute le nouveau lien au début de la liste;
 
        document.getElementById("contenu").innerHTML = ""; // Suppression de la div "contenu";
 
 
 
        var true_url = newLien.value,reg = new RegExp("^(http://|https://)[a-zA-Z0-9.-_]+$");
 
 
 
 
        if ((nomLien.value === "") || (pseudo.value === "") || (newLien.value === "")) {
            alert("Vous n'avez pas rempli tout les champs !");
            e.preventDefault;
        }
 
        else {
            if(!reg.test(true_url) ){
		        true_url = "http://"+true_url;
                newLien.value = true_url;
 
            }
 
            alert(true_url);
 
            affichageDesLiens();
            divBouton.removeChild(formElt);
            var message = "Le lien a été ajouté !";
            divBouton.textContent = message;
 
            setTimeout(function () {
 
                    divBouton.textContent = "";
                    divBouton.appendChild(bouton);
            }, 3000);
 
 
        }    
 
 
    });
});

R�sultat en appuyant sur "ajouter" :

Nom : avantOK.jpg
Affichages : 136
Taille : 126,9 Ko

R�sultat apr�s avoir appuy� sur le OK du alert() :

Nom : apr�sOK.jpg
Affichages : 152
Taille : 78,7 Ko

Comme vous pouvez le voir rien � chang� m�me en r�attribuant la bonne valeur avec

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

newLien.value = true_url;

Et j'ai aussi essay� la distinction des deux variables true_url et true_urls, mais rien y fait.........

**paoli121** · 26/06/2017, 22h52

Pour ajour le nouveau url avec http:// c'est tr�s simple, remplace la line 176 par 153 c'est � dire alert(true_url) par (listeLiens.unshift({titre:nomLien.value , url:newLien.value , auteur:pseudo.value}); // Ajoute le nouveau lien au d�but de la liste

.
Ensuite dans ceci (listeLiens.unshift({titre:nomLien.value , url:newLien.value , auteur:pseudo.value}); // Ajoute le nouveau lien au d�but de la liste

tu remplace newLien.value par true_url. FIN DU MATCH

FIN EXECUTE VOIR