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 : 167
Taille : 60,1 Ko

Nom : 14984735719534_image2.jpeg
Affichages : 167
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 : 132
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 : 115
Taille : 126,9 Ko

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

Nom : aprèsOK.jpg
Affichages : 130
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