Modifier une chaîne de texte affichée par une variable dans 1 div

**pat_fr38** · 11/06/2024, 01h22

Bonjour, à toutes et à tous.

Mon nouveau problème est de parvenir à afficher une chaîne de texte dans un div, alimentée par la valeur d'une variable, mais sans afficher le 1er et le dernier caractère de cette chaîne, dont la longueur varie selon le texte, qui est la valeur de la variable.

J'ai trouvé un JS qui marche très bien, mais pour une chaîne de texte précise et citée dans la fonction JS en constance... Le voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const str = '(The Call of the Wild)';
console.log(str.substring(1, str.length - 1));
 
Résultat affiché : The Call of the Wild

J'ai fait des recherches et tenté plein de choses pendant 2 heures, et, rien à faire, ça ne marche pas...

Côté page HTML, voici ce que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='DivTitreOriginal'><script type='text/javascript'>document.write("+mavarialble+");</script></div>

Explication de ce que j'aimerais obtenir : Ma variable, nommée par exemple "mavariable", a pour valeur, par exemple, " (The Call of the Wild) ". Le but est de faire afficher dans le div " DivTitreOriginal " cette chaîne de texte sans les parenthèses encadrant le titre original (résultat : " The Call of the Wild "), qui sont donc le 1er et le dernier caractère de cette chaîne. Bien sûr, vous me direz sans doute, le plus simple serait de ne pas écrire ces parenthèses, mais, si elles sont là, c'est pour la bonne raison qu'elles sont utiles pour l'affichage de cette variable ailleurs, sur une autre page HTML.

Ce ne doit pas être impossible... J'espère que quelqu'un pourra m'aider. Merci d'avance à ce sauveur.

**mathieu** · 11/06/2024, 02h02

pour changer le contenu d'une balise en javascript, vous pouvez essayer cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const variable_texte = "The Call of the Wild";
 
// recherche de la balise dans le code html
const DivTitreOriginal = document.getElementById("DivTitreOriginal");
 
// modification du contenu
DivTitreOriginal["textContent"] = variable_texte;

si vous avez besoin de plus d'aide, donnez nous plus d'explications sur la façon dont circulent les données, qui les utilise, etc.

**pat_fr38** · 11/06/2024, 09h26

Envoyé par mathieu

si vous avez besoin de plus d'aide, donnez nous plus d'explications sur la façon dont circulent les données, qui les utilise, etc.

Bonjour, Mathieu.

Pas de souci, voici davantage d'explications. La page HTML, qui contient entre autre le div " DivTitreOriginal ", est affichée après avoir cliqué sur un lien (qui contient une partie de la variable que j'avais surnommée " mavariable " dans mon premier message) d'une précédente page HTML. En fait, cette variable surnommée " mavariable " est une variable à nom variable. Elle est en fait la somme d'une variable commune, sous la forme " 007_2024 " par exemple, et récupérée dans l'URL du lien, ajoutée dans la fonction au texte " TitreOr " (voir le code ci-dessous) pour créer son nom final :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var ec=numeroFilm("numerodefilm"); // Valeur "numérodefilm_année" récupérée dans l'URL dans un script précédent.
 
var to="TitreOr" + ec;

On se retrouve avec une nouvelle variable (surnommée " mavariable " dans mon exemple et qui est en fait " to ") qui est alors " TitreOr007_2024 " (qui est le nom d'une variable stockée dans la base de données) et se retrouve dans le div " DivTitreOriginal " pour afficher la valeur de cette variable, qui est le titre original " The Call of the Wild ". Sauf que la valeur de cette variable " TitreOr007_2024 ", puisée dans la base de données, est " (The Call of the Wild) ".
A l'ouverture de cette nouvelle page HTML, après avoir cliqué sur un lien sur une page HTML précédente, il faudrait voir dans le div " DivTitreOriginal " seulement " The Call of the Wild ", pas de parenthèses encadrantes.

J'ai une solution qui fonctionne pour l'instant, mais lourde à utiliser, d'où ma recherche d'une solution de simplification... et il semble que ce soit finalement un cas plus compliqué qu'il n'y paraît...

Merci pour votre aide. Bonne journée.

**NoSmoking** · 11/06/2024, 18h03

Bonjour,

Envoyé par pat_fr38

Explication de ce que j'aimerais obtenir : Ma variable, nommée par exemple "mavariable", a pour valeur, par exemple, " (The Call of the Wild) ". Le but est de faire afficher dans le div " DivTitreOriginal " cette chaîne de texte sans les parenthèses encadrant le titre original (résultat : " The Call of the Wild "),

pas tout compris au micmac

Pour supprimer les parenthèses ouvrantes et fermantes, en début et fin de phrase, tu peux utiliser la méthode replace avec une regExp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// suppression parenthèses début et fin de phrase uniquement
const texteBrut = "(The Call of the Wild)";
const textClear = texteBrut.replace("/^\(|\)$/gm", "");
// affichage dans la page
const elemOutput = document.getElementById("DivTitreOriginal");
elemOutput.textContent =  textClear ;

**pat_fr38** · 11/06/2024, 18h53

Envoyé par NoSmoking

Bonjour,

pas tout compris au micmac

Bonjour, NoSmoking.

Oui, cela se voit que vous n'avez pas compris, puisque vous apportez le même type de solution que Mathieu... Ce titre " The Call of the Wild ", il est variable en fonction de la fiche de film affichée dans cette page HTML, d'où la variable " tor " (je l'ai renommée entre temps, parce que j'ai décidé d'adapter cette solution à toutes les autres variables à nom variable) qui est à nom variable, d'après la valeur (007_2024) récupérée dans l'URL du lien cliqué dans une autre page HTML et associée à l'autre partie commune " TitreOr " pour le résultat, qui peut être " TitreOr007_2024 ", mais aussi " TitreOr073_2023 " etc... selon le film sur le lien duquel on a cliqué pour voir sa fiche.

Bref, si on appliquait vos solutions, la vôtre ou celle de Mathieu, cela signifierait que, pour tous les films de la base de données, il faille mettre une fonction spécifique au titre original de chacun... Trop lourd, cela va à l'encontre de ce que j'ai réussi à faire : une page unique, qui permet d'afficher la fiche de tous les films avec toutes leurs informations propres données par des variables stockées dans la base de données. Voici le JS qui permet cela, pour bien montrer de quoi il s'agit :

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
// Script d'affichage des fiches de film.
 
function AfficheDetailsFilm()
{
var ec=numeroFilm("numerodefilm"); // Valeur "numérodefilm_année", par exemple "007_2024" (le 7ème film vu en 2024), récupérée dans l'URL par un autre script.
var fvl="FilmVuLe" + ec;
var ldv="LieuDeVisionnage" + ec;
var fva="FilmVuAvec" + ec;
var tfr="TitreFr" + ec;
var tor="TitreOr" + ec;
var rur="Realisateur" + ec;
var cur="Compositeur" + ec;
var hre="Histoire" + ec;
var pre="ProduitEn" + ec;
var sef="SortieEnFranceLe" + ec;
var dur="Duree" + ec;
var vuf="Vu" + ec;
var sga="Saga" + ec;
var fpo="FilmPossede" + ec;
var bpo="BOPossedee" + ec;
var not="Notation" + ec;
var syn="Synopsis" + ec;
var cas="Casting" + ec;
document.write("<p class='Tableau2CelluleAffiche'><img src='images/affiches/"+ec+".jpg' class='AfficheDuFilm'></p>");
document.write("<p class='Tableau2CelluleFilmVuLe1'>Film vu le</p>");
document.write("<p class='Tableau2CelluleFilmVuLe2'><script type='text/javascript'>document.write(\"\"+"+fvl+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleLieuDeVisionnage1'><a href=javascript:visibilite('DivVisionnage')>Visionné / Avec</a></p>");
document.write("<p class='Tableau2CelluleLieuDeVisionnage2'><p class='Tableau2CelluleLieuDeVisionnage3'><script type='text/javascript'>document.write(\"\"+"+ldv+"+\"\");</script></p></p>");
document.write("<div id=\"DivVisionnage\" style=\"display:none\"><p class=\"Tableau2CelluleLieuDeVisionnage2\"><p class=\"Tableau2CelluleLieuDeVisionnage3\"><script type=\"text/javascript\">document.write(\"\"+"+fva+"+\"\");</script></p></p></div>");
document.write("<p class='Tableau2CelluleTitre1'><a href=javascript:visibilite('DivTitreOriginal')>Titre / T.original</a></p>");
document.write("<p class='Tableau2CelluleTitre2'><script type='text/javascript'>document.write(\"\"+"+tfr+"+\"\");</script></p>");
document.write("<div id='DivTitreOriginal' style='display:none'><script type='text/javascript'>document.write(\"\"+"+tor+"+\"\");</script></div>");
document.write("<p class='Tableau2CelluleRealisateur1'>Réalisateur(s)</p>");
document.write("<p class='Tableau2CelluleRealisateur2'><script type='text/javascript'>document.write(\"\"+"+rur+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleCompositeur1'>Compositeur(s)</p>");
document.write("<p class='Tableau2CelluleCompositeur2'><script type='text/javascript'>document.write(\"\"+"+cur+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleHistoire1'>Histoire<br />Détails</p>");
document.write("<p class='Tableau2CelluleHistoire2'><script type='text/javascript'>document.write(\"\"+"+hre+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleProduitEn1'>Produit en</p>");
document.write("<p class='Tableau2CelluleProduitEn2'><script type='text/javascript'>document.write(\"\"+"+pre+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleSortieEnFranceLe1'>Sortie en France le</p>");
document.write("<p class='Tableau2CelluleSortieEnFranceLe2'><script type='text/javascript'>document.write(\"\"+"+sef+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleDuree1'>Durée</p>");
document.write("<p class='Tableau2CelluleDuree2'><script type='text/javascript'>document.write(\"\"+"+dur+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleVu1'>Vu</p>");
document.write("<p class='Tableau2CelluleVu2'><script type='text/javascript'>document.write(\"\"+"+vuf+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleSaga1'>Saga</p>");
document.write("<p class='Tableau2CelluleSaga2'><script type='text/javascript'>document.write(\"\"+"+sga+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleFilmPossede1'>Film possédé</p>");
document.write("<p class='Tableau2CelluleFilmPossede2'><script type='text/javascript'>document.write(\"\"+"+fpo+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleBOPossedee1'>BO possédée</p>");
document.write("<p class='Tableau2CelluleBOPossedee2'><script type='text/javascript'>document.write(\"\"+"+bpo+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleNotation'><script type='text/javascript'>document.write(\"\"+"+not+"+\"\");</script></p>");
document.write("<p class='Tableau2CelluleSynopsisCasting'><a href=javascript:visibilite('DivCasting')>Synopsis / Casting</a></p>");
document.write("<p class='Tableau2CelluleDuSynopsis'><script type='text/javascript'>document.write(\"\"+"+syn+"+\"\");</script></p>");
document.write("<div id='DivCasting' style='display:none'><script type='text/javascript'>document.write(\"\"+"+cas+"+\"\");</script></div>");
}

Quant à la page HTML qui affiche la fiche de film, la voici, mais je ne pense pas que cela soit bien utile :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html><head lang="fr"><title>Films vus par Pat - Fiche du film vu</title>
<script type="text/javascript" src="scripts/bdjsdepjm.js"></script>
<link type="text/css" rel="stylesheet" media="screen" title="Style" href="scripts/style.css" /></head><body>
<div id="Entete"><script type="text/javascript">AfficheEntete()</script></div>
<div id="Titre3"><a href='filmsvusparpjm.html'>.::::: Fiche du film vu :::::.</a></div>
<div id="Centre3"><script type="text/javascript">AfficheDetailsFilm()</script></div>
<div id="BarreDeBoutons2"><input type="button" name="bouton" style="width:50px" value="Retour" onclick="history.go(-1);return(false)"></div>
<div id="Copyright"><script type="text/javascript">AfficheCopyright()</script></div>
<div id="BarreDeBoutons1"><script type="text/javascript">AfficheBarreDeBoutons()</script></div>
</body></html>

Voilà, avec ces suppléments d'explications, j'espère que c'est plus clair...

Bonne soirée.

**NoSmoking** · 12/06/2024, 10h10

Voici le JS qui permet cela, pour bien montrer de quoi il s'agit :

Ouah ! ... cela arrive à fonctionner sur quel navigateur ?
Que tu utilises document.write, pourquoi pas, mais mettre du document.write dans du document.write fallait oser

Cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write("<p class='Tableau2CelluleFilmVuLe2'><script type='text/javascript'>document.write(\"\"+"+fvl+"+\"\");</script></p>");

... peut s'écrire plus simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write("<p class='Tableau2CelluleFilmVuLe2'>" + fvl + "</p>");

cette autre ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write("<p class='Tableau2CelluleLieuDeVisionnage2'><p class='Tableau2CelluleLieuDeVisionnage3'><script type='text/javascript'>document.write(\"\"+"+ldv+"+\"\");</script></p></p>");

... peut s'écrire plus simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write("<p class='Tableau2CelluleLieuDeVisionnage2'><p class='Tableau2CelluleLieuDeVisionnage3'>" + ldv + "</p></p>");

mais pourquoi mettre un élément <p> dans un élément <p>, le résultat, après écriture, ne sera absolument pas celui attendu !

Il existe des méthodes plus « clean » pour générer du code HTML.

Ceci étant pourrais-tu nous indiquer une valeur de ec que tu récupères avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part