11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je fais depuis le début au cas où...

Il s'agit d'une très petite page html qui affiche et gère le lecteur audio de base.

J'ai un programme perl qui me génère une commande qui contient en gros une URL.
Ce programme perl appelle un fichier.bat qui lance FF avec l'URL


Le perl :
my @Cde = ($Bat , $Param1, $Param2 , $Param3 , $Param4, $Param5, $Param6);
system @Cde;

Le .bat :
"C:\Program Files\Mozilla Firefox\firefox.exe" -P 64Bits -no remote %1=%2^&%3=///%4^&%5=%6


Jusque là pas de PB.
En JavaScript je récupère l'URL, dans laquelle j'ai le nom du fichier .mp3 à lire.
Manque de pot j'ai des centaines de fichiers qui comportent des caractères spéciaux :
20200426 - SPINOZA - Le libre-arbitre n'est-il qu'une illusion - Le Précepteur.mp3


Je traite la chaîne reçue avec :
function Init() {
	var param = window.location.search; 
	alert (' URL courante : \n' +param);
	const urlParams = new URLSearchParams (param);
	
	const name = urlParams.get ('name');
	alert (' NAME_1 : \n' +name);
	
	const nameVrai = CaractURL ( name );
	alert (' NAMEVRAI : \n' +nameVrai);
	
	const titre = urlParams.get ('titre');
	alert (' TITRE : \n' +titre);
	const titreVrai = CaractURL ( titre );
	alert (' TITREVRAI : \n' +titreVrai);
	
	const temps = urlParams .get ('temps');

	lecture_Moreau(nameVrai,titreVrai,temps);
}

function CaractURL( Url ) {
	
	alert("URL1: "+ Url);
	
	Url2 = Url.replace(/%E9/g, 'é');
	Url2 = Url.replace(/%CF/g, 'Ï');
	
	alert("URL2: "+ Url2);
	return Url2;
}


Comme vous pouvez le voir sur l'image jointe, les 'é' et 'Ï' ne sont pas convertis.
Je sèche sur ce pb rudimentaire depuis ce matin, j'ai essayé sans succès le replace avec des tas de codifications :
Url.replace(/%E9/g, '\u00e9');
...
...


C'est quoi le truc que je ne vois pas encore en JavaScript ?

[Édit] Je précise que tous les programmes (.pl ; .bat ; html & .js) sont codés utf8. D'ailleurs au démarrage je force un titre qui contient des caractères spéciaux, qui passe bien dans le html.
Visiblement c'est le URLSearchParams (param) qui convertit tout seul les %20 en espaces.
Pour info je lis très bien des .mp3 dont les noms ne comportent pas de caractères spéciaux. Quand même Smiley smile

[Édit:13/08 à 06:30]
Je ne sais pas comment est codée la chaîne renvoyée par urlParams.get ('name'); mais aucune transformation ne fonctionne ! Smiley decu J'ai essayé :
function CaractURL( Url ) {
	
	alert("URL1: "+ Url);
	Url2 = Url.replace(/ /, 'Coucou');
	Url2 = Url.replace(/\u0020/, 'Coucou');

// ET BIEN D'AUTRES.....
	
	Url2 = Url.replace(/%E9/g, 'é');
	Url2 = Url.replace(/%CF/g, 'Ï');

// SEUL CE QUI SUIT FONCTIONNE :

	Url2 = 'TTTTTTTTTTTTTTTTTTTTTttttttttt';
	alert("URL2: "+ Url2);
	return Url2;
}


Ou c'est ma syntaxe Url.replace , qui foire, pourtant c'est ce que je trouve sur Internet...



Merci pour vos suggestions !
https://zupimages.net/viewer.php?id=21/32/k0cy.jpg
Modifié par dmganges (13 Aug 2021 - 06:28)
Bonjour,
J'ai trouvé Smiley biggrin
Il me faut convertir les caractères que j'envoie depuis perl avant de faire le new URLSearchParams.

Ce qui donne :
function Init() {
	var param = window.location.search; 
	//alert (' URL courante : \n' +param);
	const param_2 = CaractURL ( param );
	const urlParams = new URLSearchParams (param_2);
	
	const name = urlParams.get ('name');
	alert (' NAME_1 : \n' +name);
	
	const titre = urlParams.get ('titre');
	alert (' TITRE : \n' +titre);
	
	const temps = urlParams .get ('temps');

	lecture_Moreau(name,titre,temps);
}


function CaractURL( Url ) {
	
	Url2 = Url.replaceAll("%E9", 'é')
	          .replaceAll("%CF", 'Ï');
	
	return Url2;
}

https://zupimages.net/viewer.php?id=21/32/kh9s.jpg

Il ne me reste plus qu'à compléter le fonction pour les autres caractères.
Merci de m'avoir lu !

S'il y a moins bourrin pour la fonction CaractURL, bien sûr je suis preneur ! & MERCI !
Modifié par dmganges (13 Aug 2021 - 15:11)
Bonjour,
il existe des fonctions JS qui font déjà ce type de conversions, notamment unescape, mais elle est plus ou moins dépréciée. À la place, il faut utiliser decodeURI (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/decodeURI), mais elle est beaucoup moins permissive que unescape, je me souviens avoir bien galéré.
Bon courage.
Bonjour et merci Seven tears pour ta réponse et tes encouragements.
J'ai complété la fonction.
A y être j'ai vu grand Smiley biggrin j'ai testé les principaux noms de fichiers avec les principaux caractères spéciaux qu'on rencontre en français.
Je colle la fonction décodage js, et encodage côté perl, ça peut servir, mais c'est Sans Garantie Du Gouvernement.
NB les commentaires, j'ai du tricher pour les deux oubliés : œ et Œ.

décodage.js :
function CaractURL( Url ) {
	
	Url2 = Url.replaceAll("%21", '!')
	          .replaceAll("%22", '"')
	          .replaceAll("%23", '#')
	          .replaceAll("%24", '$')
	          .replaceAll("%25", '%')
//	          .replaceAll("%26", '&') Il ne faut pas le remplacer car c'est le séparateur des paramètres pour URLSearchParams
	          .replaceAll("%27", "'")
	          .replaceAll("%28", '(')
	          .replaceAll("%29", ')')
	          .replaceAll("%2A", '*')
	          .replaceAll("%2B", '+')
	          .replaceAll("%2C", ',')
	          .replaceAll("%2D", '-')
	          .replaceAll("%2E", '.')
	          .replaceAll("%2F", '/')
	          .replaceAll("%3A", ':')
	          .replaceAll("%3B", ';')
	          .replaceAll("%3C", '<')
	          .replaceAll("%3D", '=')
	          .replaceAll("%3E", '>')
//	          .replaceAll("%3F", '?') D'une part le ? est interdit dans les mons de fichiers Win, d'autre part ? est le premier séparateur entre l'URL et le premier paramètre
	          .replaceAll("%40", '@')
	          .replaceAll("%5B", '[')
	          .replaceAll("%5C", '\\')		// À voir si pb
	          .replaceAll("%5D", ']')
	          .replaceAll("%5E", '^')
	          .replaceAll("%60", '`')
	          .replaceAll("%7B", '/')
	          .replaceAll("%7C", '|')
	          .replaceAll("%7D", '}')
	          .replaceAll("%7E", '~')
	          .replaceAll("%92", 'Œ')		// Attention j'ai triché dans le .pl en fait c'est C5%92
	          .replaceAll("%93", 'œ')		// Attention j'ai triché dans le .pl en fait c'est C5%93	
	          .replaceAll("%AB", '«')
	          .replaceAll("%BB", '»')
	          .replaceAll("%C0", 'À')
	          .replaceAll("%C1", 'Á')
	          .replaceAll("%C2", 'Â')
	          .replaceAll("%C3", 'Ã')
	          .replaceAll("%C4", 'Ä')
	          .replaceAll("%C5", 'Å')
	          .replaceAll("%C6", 'Æ')
	          .replaceAll("%C7", 'Ç')
	          .replaceAll("%C8", 'È')
	          .replaceAll("%C9", 'É')
	          .replaceAll("%CA", 'Ê')
	          .replaceAll("%CB", 'Ë')
	          .replaceAll("%CC", 'Ì')
	          .replaceAll("%CD", 'Í')
	          .replaceAll("%CE", 'Î')
	          .replaceAll("%CF", 'Ï')
	          .replaceAll("%D1", 'Ñ')
	          .replaceAll("%D2", 'Ò')
	          .replaceAll("%D3", 'Ó')
	          .replaceAll("%D4", 'Ô')
	          .replaceAll("%D5", 'Õ')
	          .replaceAll("%D6", 'Ö')
	          .replaceAll("%D9", 'Ù')
	          .replaceAll("%DA", 'Ú')
	          .replaceAll("%DB", 'Û')
	          .replaceAll("%DC", 'Ü')
	          .replaceAll("%E0", 'à')
	          .replaceAll("%E1", 'á')
	          .replaceAll("%E2", 'â')
	          .replaceAll("%E3", 'ã')
	          .replaceAll("%E4", 'ä')
	          .replaceAll("%E5", 'å')
	          .replaceAll("%E6", 'æ')
	          .replaceAll("%E7", 'ç')
	          .replaceAll("%E8", 'è')
	          .replaceAll("%E9", 'é')	
	          .replaceAll("%EA", 'ê')
	          .replaceAll("%EB", 'ë')
	          .replaceAll("%EC", 'ì')
	          .replaceAll("%ED", 'í')
	          .replaceAll("%EE", 'î')
	          .replaceAll("%EF", 'ï')
	          .replaceAll("%F1", 'ñ')
	          .replaceAll("%F2", 'ò')
	          .replaceAll("%F3", 'ó')
	          .replaceAll("%F4", 'ô')
	          .replaceAll("%F5", 'õ')
	          .replaceAll("%F6", 'ö')
	          .replaceAll("%F9", 'ù')
	          .replaceAll("%FA", 'ú')
	          .replaceAll("%FB", 'û')
	          .replaceAll("%FC", 'ü');

	//alert("URL2: "+ Url)
	return Url2;
}


encodage.pl (je le mets entre balise JavaScript ça doit faire...).
sub ActiverCaractURL {
	my ( $Url ) = @_;
	
	$Url =~ s/ /%20/g;
	$Url =~ s/é/%E9/g;
	$Url =~ s/Ï/%CF/g;
	$Url =~ s/!/%21/g;
	$Url =~ s/"/%22/g;
	$Url =~ s/#/%23/g;
	$Url =~ s/\$/%24/g;
	
#	$Url =~ s/%/%25/g; Ne pas modifier c'est le .bat qui le gère : "C:\Program Files\Mozilla Firefox\firefox.exe" -P 64Bits -no remote %1=%2^&%3=///%4^&%5=%6
	
	$Url =~ s/%/%25/g;
	$Url =~ s/&/%26/g;
	$Url =~ s/'/%27/g;
	$Url =~ s/\(/%28/g;
	$Url =~ s/\)/%29/g;
	$Url =~ s/\*/%2A/g;
	$Url =~ s/\+/%2B/g;
	$Url =~ s/,/%2C/g;
	$Url =~ s/-/%2D/g;
	$Url =~ s/\./%2E/g;
	$Url =~ s/\//%2F/g;
	$Url =~ s/:/%3A/g;
	$Url =~ s/;/%3B/g;
	$Url =~ s/</%3C/g;
	$Url =~ s/=/%3D/g;
	$Url =~ s/>/%3E/g;
	$Url =~ s/\?/%3F/g;
	$Url =~ s/@/%40/g;
	$Url =~ s/\[/%5B/g;
	$Url =~ s/\\/%5C/g;
	$Url =~ s/\]/%5D/g;
	$Url =~ s/\^/%5E/g;
	$Url =~ s/`/%60/g;
	$Url =~ s/\{/%7B/g;
	$Url =~ s/\|/%7C/g;
	$Url =~ s/\}/%7D/g;
	$Url =~ s/~/%7E/g;
	$Url =~ s/Œ/%92/g;  # Je triche en fait c'est %C5%92
	$Url =~ s/œ/%93/g;  # Je triche en fait c'est %C5%93
	$Url =~ s/«/%AB/g;
	$Url =~ s/»/%BB/g;
	$Url =~ s/À/%C0/g;
	$Url =~ s/Á/%C1/g;
	$Url =~ s/Â/%C2/g;
	$Url =~ s/Ã/%C3/g;
	$Url =~ s/Ä/%C4/g;
	$Url =~ s/Å/%C5/g;
	$Url =~ s/Æ/%C6/g;
	$Url =~ s/Ç/%C7/g;
	$Url =~ s/È/%C8/g;
	$Url =~ s/É/%C9/g;
	$Url =~ s/Ê/%CA/g;
	$Url =~ s/Ë/%CB/g;
	$Url =~ s/Ì/%CC/g;
	$Url =~ s/Í/%CD/g;
	$Url =~ s/Î/%CE/g;
	$Url =~ s/Ï/%CF/g;
	$Url =~ s/Ñ/%D1/g;
	$Url =~ s/Ò/%D2/g;
	$Url =~ s/Ó/%D3/g;
	$Url =~ s/Ô/%D4/g;
	$Url =~ s/Õ/%D5/g;
	$Url =~ s/Ö/%D6/g;
	$Url =~ s/Ù/%D9/g;
	$Url =~ s/Ú/%DA/g;
	$Url =~ s/Û/%DB/g;
	$Url =~ s/Ü/%DC/g;
	$Url =~ s/à/%E0/g;
	$Url =~ s/á/%E1/g;
	$Url =~ s/â/%E2/g;
	$Url =~ s/ã/%E3/g;
	$Url =~ s/ä/%E4/g;
	$Url =~ s/å/%E5/g;
	$Url =~ s/æ/%E6/g;
	$Url =~ s/ç/%E7/g;
	$Url =~ s/è/%E8/g;
	$Url =~ s/é/%E9/g;
	$Url =~ s/ê/%EA/g;
	$Url =~ s/ë/%EB/g;
	$Url =~ s/ì/%EC/g;
	$Url =~ s/í/%ED/g;
	$Url =~ s/î/%EE/g;
	$Url =~ s/ï/%EF/g;
	$Url =~ s/ñ/%F1/g;
	$Url =~ s/ò/%F2/g;
	$Url =~ s/ó/%F3/g;
	$Url =~ s/ô/%F4/g;
	$Url =~ s/õ/%F5/g;
	$Url =~ s/ö/%F6/g;
	$Url =~ s/ù/%F9/g;
	$Url =~ s/ú/%FA/g;
	$Url =~ s/û/%FB/g;
	$Url =~ s/ü/%FC/g;

	return $Url;
	
}