API Fetch - modifier response.text()

**jpr1058** · 30/09/2020, 10h09

Bonjour,

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

Je suis en présence de ce code :

Code :

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

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

**Doksuri** · 30/09/2020, 10h51

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 ?

**jpr1058** · 30/09/2020, 11h07

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

**Doksuri** · 30/09/2020, 13h52

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');

**jpr1058** · 30/09/2020, 14h19

Oui, c'est juste du remplacement "simple" ...
Cette syntaxe de "chainage" me plait bien, je vais tester demain matin !
Merci

**jpr1058** · 01/10/2020, 08h57

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

Merci pour ton aide
Bien cordialement - Jean-Paul

**Doksuri** · 01/10/2020, 09h47

250 instructions HTML

c'est a dire ?

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)

**jpr1058** · 01/10/2020, 10h20

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
<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 :

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

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-");
})

**Doksuri** · 01/10/2020, 11h08

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

le plus simple dans ton cas, serait de mettre en place differents flux (en fonction de la langue)

**jpr1058** · 01/10/2020, 11h16

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

**Doksuri** · 01/10/2020, 12h06

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

Code javascript :

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

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

**jpr1058** · 01/10/2020, 13h27

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é

**Doksuri** · 01/10/2020, 13h44

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 javascript :

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

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);

**jpr1058** · 01/10/2020, 14h25

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

TypeError: html.replaceMany is not a function

Grrrr

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
<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>

**Doksuri** · 01/10/2020, 15h11

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

String.prototype.replaceMany = function(search, replace) {

**jpr1058** · 01/10/2020, 15h32

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

**jpr1058** · 01/10/2020, 15h57

TypeError: Cannot set property 'innerHTML' of null

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
<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>

**Doksuri** · 01/10/2020, 17h20

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

API Fetch - modifier response.text()

JavaScript

Discussions similaires

Partager

Partager