Extraction url JavaScript

**nicoco78440** · 22/08/2019, 08h37

Bonjour � tous,

Je souhaiterai extraire des informations d'une URL et les afficher dans un bandeau d�roulant HTML, j'essaye d'expliquer au plus clair ce que je veux.

J'ai cr�� une page HTML qui demande � l'utilisateur 4 informations (site,impact,probleme,temps de r�solution), c'est derni�res apparaissent sur l'uRL bandeau.html :

Code HTML :

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
\\Demande utilisateur information
<html>
<form action="bandeau.html" method="get">
 
<Center>
 Site impacté :
 
<SELECT name="site" size="1" width=500px/>
<OPTION>Tous
<OPTION>Paris
<OPTION>Marseille
<OPTION>Bordeaux
<OPTION>Montpellier
</SELECT>
 
 
			<p>	
		Impact : 
 
<SELECT name="impact" size="1"
width : 500px />
<OPTION>Faible
<OPTION>Moyenne
<OPTION>Forme
</SELECT>
</p>
 
 
<p> Description du probleme : 
<input type ="text" name="probleme" />
</p>
 
<p> Temps résolution :
<input type="text" name="temps" />
 
<input type="submit" value="Valider" />
</p>
</Center>
</form>
</body>
</html>

Je souhaiterais extraire ces informations pour les places dans un bandeaux d�roulant :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<title>Incident en cours</title>
</head>
<body>
<iframe src="http://192.168.100.8/bandeau#/" style="height:90%;width:100%;"></iframe><br>
<center>
 
<!--texte caché -->
<marquee  direction="right" width="100%" height="50" loop="-1"  bgcolor="red" valign="middle" ><b><br> </b></marquee><br>
 
<br>
</body>
?>
</html>

Merci d'avance pour votre aide

**nicoco78440** · 22/08/2019, 09h28

J'arrive � "extraire" la donn�e site, mais je n'arrive qu'� l'afficher en alerte au lieu de la mettre dans mon bandeau, et je n'arrive pas � faire la m�me chose pour les autres (impact,probleme,temps) :

Code HTML :

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
<html>
<script language="JavaScript">
function getParamByName(site, url,) {
    if (!url) url = window.location.href;
    site = site.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + site + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var site = getParamByName('site');
 
alert(site);
 
</script>
 
</html>

**javatwister** · 22/08/2019, 12h06

adapt� de MDN:

Code :

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

1
2
3
4
5
6
7
var tab = {};
var url = window.location.href.search;
for (var param, rang = 0, lg = url.substr(1).split("&"); rang < lg.length; rang++) {
    param = lg[rang].split("=");
    tab[unescape(param[0])] = param.length > 1 ? unescape(param[1]) : "";
 }
console.log(Object.values(tab));// tes valeurs

**nicoco78440** · 22/08/2019, 12h41

Bonjour, merci javatwister pour ton retour.

Par contre je ne vois pas du tout quoi remplacer dans mon code avec ce que tu viens de m'envoyer... as-tu la possibilit� de l'adapter � mon code actuel ?

**javatwister** · 22/08/2019, 13h13

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Là tu récupères uniquement les valeurs saisies, quel que soit le nom des paramètres;
// si tu veux, tu peux associer le nom des champs, c'est facile à modifier;
function getParamByName(url){
var tab = {};
for (var param, rang = 0, lg = url.substring(1).split("&"); rang < lg.length; rang++) {
    param = lg[rang].split("=");
    tab[unescape(param[0])] = param.length > 1 ? unescape(param[1]) : "";
 }
console.log(Object.values(tab))
}
 
// appel de ta fonction de récupération des valeurs saisies
getParamByName(window.location.href.search);

**nicoco78440** · 22/08/2019, 13h27

Je dois remplacer l'ensemble de mon code JS par cela ?
j'ai beaucoup de mal d�sol�

**javatwister** · 22/08/2019, 13h31

Ben en fait oui...

**nicoco78440** · 22/08/2019, 13h35

Coollll

Mais ton code permets de recuperer les informations demand�es dans la page pr�c�dente ?
Je peux les afficher comment sur une page HTML ?

D�sol� mais je ne sais pas du tout et ca fait des jours que je cherche et l� faut que je recommence snifff, je n'arrive que � faire des alertes JS :

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
 
 
<html>
<script language="JavaScript">
function getParamByimpact(impact, url) {
    if (!url) url = window.location.href;
    impact = impact.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + impact + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var impact = getParamByimpact('impact');
 
 
 
function getParamBysite(site, url) {
    if (!url) url = window.location.href;
    site = site.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + site + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var site = getParamBysite('site');
 
 
 
function getParamByprobleme(probleme, url) {
    if (!url) url = window.location.href;
    probleme = probleme.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + probleme + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var probleme = getParamByprobleme('probleme');
 
 
 
function getParamBytemps(temps, url) {
    if (!url) url = window.location.href;
    temps = temps.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + temps + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var temps = getParamBytemps('temps');
 
alert(temps);
 
</script>
 
</html>

**javatwister** · 22/08/2019, 14h18

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
// fonction qui récupère les couples paramètre / valeur dans l'url
function getParamByName(chaine, url){
// tu crées un objet vide "tab"...
var tab = {};
for (var param, rang = 0, lg = url.substring(1).split("&"); rang < lg.length; rang++) {
    param = lg[rang].split("=");
    // ... qui va contenir chaque couple paramètre / valeur
	tab[unescape(param[0])] = param.length > 1 ? unescape(param[1]) : "";
 }
// tu transformes l'objet "tab" en chaîne
for (val in tab){
	chaine+=val+":"+tab[val]+" ";
 
}
// "chaine" contient tous les couples paramètre / valeur
// Tu en fais ce que tu veux... mis à part évidemment une balise "marquee"...
return chaine;
}
// appel de ta fonction dans une "alert" qui te confirme que tu as bien tous les résultats
alert(getParamByName("",window.location.href.search));

**nicoco78440** · 22/08/2019, 15h13

ok donc je ne peux rien faire avec ce que je r�cup�re dans ma page donnee.html :

rappel

Code HTML :

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
 
<html>
<form action="bandeau.html" method="get">
 
<Center>
 Site impacté :
 
<SELECT name="site" size="1" width=500px/>
<OPTION>Tous
<OPTION>Paris
<OPTION>Marseille
<OPTION>Bordeaux
<OPTION>Montpellier
</SELECT>
 
 
			<p>	
		Impact : 
 
<SELECT name="impact" size="1"
width : 500px />
<OPTION>Faible
<OPTION>Moyenne
<OPTION>Forte
</SELECT>
</p>
 
 
<p> Description du probleme : 
<input type ="text" name="probleme" />
</p>
 
<p> Temps résolution :
<input type="text" name="temps" />
 
<input type="submit" value="Valider" />
</p>
</Center>
</form>
</body>
</html>

car je souhaite que r�cup�rer les donn�es pour les mettre dans un bandeau d�filant, il y a que le php ??

**javatwister** · 22/08/2019, 16h28

Envoy� par nicoco78440

je ne peux rien faire avec ce que je recup�re dans ma page donnee.html

Je pense surtout que ton vrai probl�me est:

Comment donner un contenu � une balise HTML avec javascript...

Et l�, je te laisse chercher;

**nicoco78440** · 22/08/2019, 17h01

c est exactement ca, mais est ce que cela est possible... ca m'evite de chercher pour rien

Invit� · 22/08/2019, 17h01

Bonjour,

bandeau.html :

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title></title>
<script>
'use strict';
// récupère un paramètre dans l'URL
function $_GET(param) {
        var vars = {};
        var url = decodeURIComponent( window.location.href.replace(/\+/g, '%20') );
        console.log( url );
        url.replace( location.hash, '' ).replace( 
                /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
                function( m, key, value ) { // callback
                        vars[key] = value !== undefined ? value : '';
                }
        );
        if ( param ) {
                return vars[param] ? vars[param] : null;        
        }
        return vars;
}
// texte défilant
function texte_defilant() {
        var site = $_GET( 'site' );
        var impact = $_GET( 'impact' );
        var probleme = $_GET( 'probleme' );
        var temps = $_GET( 'temps' );
        var texteHTML = '<em>site : </em>'+site+'<br/><em>impact : </em>'+impact+'<br/><em>problème : </em>'+probleme+'<br/><em>temps : </em>'+temps;
        document.getElementById('texte_defilant').innerHTML = texteHTML;
}
// appel de la fonction sur onload
window.onload = function(){
        texte_defilant();
}
</script>
<style>
.marquee-rtl {
  overflow: hidden; /* important */
  width:50%; /* A ADAPTER */
  max-width:600px; /* A ADAPTER */
  margin: 2em auto;
  border: 5px solid #F0F0FF;
}
.marquee-rtl > div {
  display: inline-block; /* important */
  white-space: nowrap; /* important */
  animation: defilement-rtl 15s infinite linear; /* défilement */
  cursor: pointer;
  padding: 10px 2em 10px 100%;
  font-size: 120%;
  font-family:Arial,sans-serif;
}
.marquee-rtl:hover > div {
  animation-play-state: paused; /* met en pause le défilement */
}
@keyframes defilement-rtl {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  100% {
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
  }
}
/* texte sur plusieurs lignes automatiquement */
.marquee-multi-lignes > div { 
  width:90%;
  white-space: normal; /* important */
}
/* DECO */
.marquee-rtl > div > em {
        display:inline-block;
        width:100px;
        font-size:75%;
        color:#666;
}
</style>
</head>
<body>
<div class="marquee-rtl marquee-multi-lignes">
	<div id="texte_defilant"></div>
</div>
 
</body>
</html>