API Fetch - modifier response.text()

Version imprimable

Bonjour,

Je suis tout nouveau sur ce forum, informaticien à la retraite, novice en JAVASCRIPT et aurait besoin d'un coup de main 8O

Je suis en présence de ce code :
Code:

1 2 3 4 5 6 7 8 9 const urlfr = "https://url du serveur"; /* fetch(url, { mode: 'no-cors' }) */ fetch(urlfr) .then(response => response.text()) .then(html => { // console.log(html); document.getElementById('fr-data').innerHTML = html; }) .catch((err) => console.log( urlen + " response. Blocked by browser?" + err));
D'après mes tests, il s'agit d'une récupération de code pour l'injecter dans le document en cours.
Je voudrais 'intervenir' après la récupération dans response.text()

via quelques .replace
et avant 'l'injection' dans le document

Je pense que cela ne devrait pas être compliqué pour un pro mais avec toutes ces syntaxes différentes par language ...

Merci d'avance
Cordialement - Jean-Paul

30/09/2020, 10h51
Doksuri

je n'ai pas compris ce que tu voulais faire :
un simple document.getElementById('fr-data').innerHTML = html.replace('x', 'y'); ?
ou quelque chose de plus complex ?
30/09/2020, 11h07
jpr1058

Merci Doksuri pour ce premier élément de réponse mais j'ai identifié au moins 4 replace donc, oui, quelque chose de plus complexe ;)
30/09/2020, 13h52
Doksuri

mais c'est juste du remplacement de texte "simple", ou c'est deplacer/modifier des elements du retour html ???
sinon, rien ne t'empeche de "chainer" les replace
html.replace('a','b').replace('c','d').replace('e','f').replace('g','h');
30/09/2020, 14h19
jpr1058

Oui, c'est juste du remplacement "simple" ...
Cette syntaxe de "chainage" me plait bien, je vais tester demain matin !
Merci
01/10/2020, 08h57
jpr1058

Bonjour Doksuri, impeccable le test avec les .replace chainés !

mais ...

En fait, je n'avais pas assez bien analysé le fetch. Il 'ramène' pas moins de 250 instructions HTML et donc les .replace doivent s'appliquer à chacune d'elles ...

Donc je sens bien arriver une boucle 8-)

Merci pour ton aide
Bien cordialement - Jean-Paul
01/10/2020, 09h47
Doksuri

Citation:

250 instructions HTML

c'est a dire ? :koi:
peux-tu nous montrer ce que retourne le fetch ? (ou une partie, si c'est trop long)

=> sinon, tu peux passer par une regexp (pour le replace)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<DIV id="d-all" ><DIV style="margin-left:0px;margin-top:12px;font-size:24px;font-weight: bold;">1. Corps professionnels  </DIV>
<DIV id="d-1" ><DIV style="margin-left:15px;margin-top:9px;font-size:23px;font-weight: bold;">1.1. Légal (25) <input type="button" value="show" class="modest" id="b-1-1" onclick="toggle('1-1');"></DIV>
<DIV id="d-1-1" style="display:none"><DIV style="margin-left:30px;margin-top:6px;font-size:22px;font-weight: bold;"> Global  </DIV>
<DIV id="d-1-1-1" ><DIV style="margin-left:45px;font-size:18px;">Lawyers For Assange: <A href="https://www.lawyersforassange.org/en/signatories.html" target="_blank">Site Internet</A><BR><I>&nbsp;&nbsp;- 170 legal experts and 19 lawyers' associations</I></DIV>
<DIV style="margin-left:45px;font-size:18px;">International Bar Association: <A href="https://www.ibanet.org/Default.aspx" target="_blank">Site Internet</A>, <A href="https://www.ibanet.org/Article/NewDetail.aspx?ArticleUid=c05c57ee-1fee-47dc-99f9-26824208a750" target="_blank">Déclaration</A></DIV>
<DIV style="margin-left:45px;font-size:18px;">International Association of Democratic Lawyers: <A href="https://iadllaw.org/member-organizations/" target="_blank">Site Internet</A>, <A href="https://iadllaw.org/2014/06/59-international-organizations-call-upon-un-to-remedy-human-rights-violations-in-pre-charge-detention-of-wikileaks-publisher-julian-assange" target="_blank">Déclaration</A>, <A href="https://iadllaw.org/2020/06/iadl-calls-on-uk-court-to-grant-bail-to-julian-assange-ill-and-vulnerable-to-covid-19/" target="_blank">Covid-19</A><BR><I>&nbsp;&nbsp;- one of the original NGOs accredited in Consultative II Status with the United Nations Economic and Social Council</I></DIV>
<DIV style="margin-left:45px;font-size:18px;">The Council of Bar and Law Societies of Europe (CCBE): <A href="https://www.ccbe.eu/about/who-we-are/" target="_blank">Site Internet</A>, <A href="https://twitter.com/AitorxMartinez/status/1232987190373777408" target="_blank">Déclaration</A></DIV>
<DIV style="margin-left:45px;font-size:18px;">European Association of Lawyers for Democracy and World Human Rights (ELDH): </DIV>
<DIV style="margin-left:45px;font-size:18px;">African Bar Association: <A href="https://www.afribar.org" target="_blank">Site Internet</A></DIV>
<DIV style="margin-left:45px;font-size:18px;">American Association of Jurists (AAJ): <A href="https://uia.org/s/or/en/1100062025" target="_blank">Site Internet</A><BR><I>&nbsp;&nbsp;- consultative status with the United Nations Economic and Social Council</I></DIV>
</DIV><DIV style="margin-left:30px;margin-top:6px;font-size:22px;font-weight: bold;"> Australie  </DIV>
<DIV id="d-1-1-2" ><DIV style="margin-left:45px;font-size:18px;">Australian Lawyers Alliance: <A href="https://www.lawyersalliance.com.au" target="_blank">Site Internet</A>, <A href="https://www.lawyersalliance.com.au/tags/julian-assange" target="_blank">Déclaration</A></DIV>
<DIV style="margin-left:45px;font-size:18px;">NSW Council of Civil Liberties: <A href="https://www.nswccl.org.au" target="_blank">Site Internet</A>, <A href="https://www.nswccl.org.au/the_arrest_and_threatened_extradition_of_julian_assange" target="_blank">Déclaration</A></DIV>
<DIV style="margin-left:45px;font-size:18px;">Human Rights Law Center: <A href="https://www.hrlc.org.au/what-we-do" target="_blank">Site Internet</A>, <A href="https://www.hrlc.org.au/news/2019/4/12/prosecution-of-assange-a-threat-to-press-freedom-around-the-world" target="_blank">Déclaration</A></DIV>
<DIV style="margin-left:45px;font-size:18px;">The Centre for Human Rights Education of Curtin University: <A href="http://humanrights.curtin.edu.au/about/history-and-philosophy/" target="_blank">Site Internet</A>, <A href="http://humanrights.curtin.edu.au/about/news/#assange31aug2020" target="_blank">Déclaration</A></DIV>

Voici les 15 premières lignes renvoyées par le fetch

et le fetch modifié selon tes conseils

Code:

1
2
3
4
5
6
fetch(urlfr)
  .then(response => response.text())
.then(html => {
  // console.log(html);
  document.getElementById('fr-data').innerHTML = html.replace('show','afficher').replace('hide','masquer').replace('id="b','id="bfr').replace('id="d','id="dfr').replace("toggle('","toggle('fr-");
})

01/10/2020, 11h08
Doksuri

ah oui... ca va etre ... ennuyant de tout replace() :aie:

le plus simple dans ton cas, serait de mettre en place differents flux (en fonction de la langue)
01/10/2020, 11h16
jpr1058

C’est sûr mais je ne suis pas maître de la source.

Idéalement ce serait cool de la laisser en anglais et de faire les adaptations après coup

meme si ce n'est pas l'ideal, je t'ai fais un petit prototype

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
String.prototype.replaceMany = function(search, replace) {
    if(search.length !== replace.length) throw 'replaceMany() missmatch arrays length';
    let str = this;
    search.forEach((s, i) => {
        str = str.replace(s, replace[i]);
    });
    return str;
};
const phrase = 'tata et toto sont dans un bateau';
const search =      ['tata', 'toto', 'bateau'];
const replaceWith = ['titi', 'tutu', 'navire'];
const nouvellePhrase = phrase.replaceMany(search, replaceWith);
console.log(nouvellePhrase);//titi et tutu sont dans un navire

01/10/2020, 13h27
jpr1058

Oups, ça devient chaud mais je vais regarder :? Par contre, ça se positionne où dans mon fetch ?

Oui je sais certainement une question de débutant, désolé

la function de prototype, au debut de ton code,
et l'appel au prototype... a l'endroit de ton replace
au lieu de faire document.getElementById('fr-data').innerHTML = html.replace()...
tu fais
Code:

1 2 3 const search = ['show', 'hide', 'id="b', 'id="dfr', "toggle('"]; const replaceWith = ['afficher', 'masquer', 'id="bfr', 'id="dfr', "toggle('fr-"]; document.getElementById('fr-data').innerHTML = html.replaceMany(search, replaceWith);

Voilà le script en totalité et il me répond

Citation:

TypeError: html.replaceMany is not a function

Grrrr :oops:

Code:

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
<script>
  function replaceMany (search, replace) {
    if(search.length !== replace.length) throw 'replaceMany() missmatch arrays length';
    let str = this;
    search.forEach((s, i) => {
        str = str.replace(s, replace[i]);
    });
    return str;
  };
  function toggle(id) {
    var div = document.getElementById("dfr-"+id);
    var but = document.getElementById("bfr-"+id);
    if (div.style.display === "none") {
      div.style.display = "block";
      but.value="masquer"
    } else {
      div.style.display = "none";
      but.value="afficher"
    }
  }
const urlfr = "https://url du serveur";
const search =      ['show', 'hide', 'id="b', 'id="dfr', "toggle('"];
const replaceWith = ['afficher', 'masquer', 'id="bfr', 'id="dfr', "toggle('fr-"];
/* fetch(url, { mode: 'no-cors' }) */
fetch(urlfr)
  .then(response => response.text())
.then(html => {
  // console.log(html);
  document.getElementById('fr-data').innerHTML = html.replaceMany(search, replaceWith);
})
.catch((err) => console.log( urlfr + " response. Blocked by browser?" + err));
</script>

01/10/2020, 15h11
Doksuri

c'est pas pour rien que j'ai specifie "prototype"....

String.prototype.replaceMany = function(search, replace) {
01/10/2020, 15h32
jpr1058

OK merci, je vois ça un peu plus tard ... je dois m'absenter ;-)

Citation:

TypeError: Cannot set property 'innerHTML' of null

Code:

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
<script>
  String.prototype.replaceMany = function(search, replace) {
    if(search.length !== replace.length) throw 'replaceMany() missmatch arrays length';
    let str = this;
    search.forEach((s, i) => {
        str = str.replace(s, replace[i]);
    });
    return str;
  };
  function toggle(id) {
    var div = document.getElementById("dfr-"+id);
    var but = document.getElementById("bfr-"+id);
    if (div.style.display === "none") {
      div.style.display = "block";
      but.value="masquer"
    } else {
      div.style.display = "none";
      but.value="afficher"
    }
  }
const url = "https://url du serveur";
const search =      ['show', 'hide', 'id="b', 'id="d', "toggle('"];
const replaceWith = ['afficher', 'masquer', 'id="bfr', 'id="dfr', "toggle('fr-"];
/* fetch(url, { mode: 'no-cors' }) */
fetch(url)
  .then(response => response.text())
.then(html => {
  // console.log(html);
  document.getElementById('fr-data').innerHTML = html.replaceMany(search, replaceWith);
})
.catch((err) => console.log( url + " response. Blocked by browser?" + err));
</script>

01/10/2020, 17h20
Doksuri

document.getElementById('fr-data') ne doit pas exister ... il doit faire partie de ta page, pas du retour ajax