Ouvrir, modifier et enregistrer un fichier xml tout en JavaScript

Version imprimable

20/09/2018, 20h15
ynoury

Ouvrir, modifier et enregistrer un fichier xml tout en JavaScript

Bonjour,
Je suis débutant en JavaScript et je souhaiterai un coup de pouce pour réaliser les tâches suivantes UNIQUEMENT en JavaScript:
- ouvrir un fichier xml
- modifier le contenu de cet élément dans le fichier : (<content>{Nom_produit}<\content>)
- enregistrez le résultat dans un nouveau fichier xml

Merci beaucoup pour votre aide ou vos conseils car j’ai du mal à me lancer.

hello

avec nodejs.. minimalisme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
//fs comme filesystem..
var fs = require('fs')
 
//tu lis
var str = fs.readFileSync('tonfichier.xml').toString()
 
//tu remplaces
str = str.replace('<content>{Nom_produit}</content>', 'ton contenu')
 
//tu ecris
fs.writeFileSync('tonfichier2.xml', str)

20/09/2018, 23h19
ynoury

Autre méthode?

Merci,
Mais existe-t-il également une autre méthode sans passer par Node.js? (Il semblerait qu’il ne soit pas totalement sûr en terme de sécurité, d’aprés ce que j’en ai lu dans les actualités...)
21/09/2018, 09h29
eleydet

Bonjour,

Il faut préciser car il y a plusieurs possibilités :
- Le fichier à ouvrir est sur le serveur et l'enregistrement du fichier modifié se fait sur le serveur.
- Le fichier est sur le client et l'enregistrement se fait sur le client.
- Le fichier est sur le serveur et l'enregistrement se fait sur le client.
Dans tous les cas, les solutions à mettre en oeuvre ne sont pas simples.
21/09/2018, 10h03
Invité

Citation:

Mais existe-t-il également une autre méthode sans passer par Node.js?

tu veux l'exécuter/interpréter comment ton js?

Citation:

Il semblerait qu’il ne soit pas totalement sûr en terme de sécurité, d’aprés ce que j’en ai lu dans les actualités...

pas bien sûr de savoir quels pbs de sécurité te préoccupent

Voici un exemple côté client seul où tout se passe dans le navigateur. À cause des contraintes de sécurité imposées, il est nécessaire de demander à l’utilisatrice ou utilisateur de réaliser les actions suivantes :

sélectionner le fichier à modifier ;
sélectionner l’emplacement où enregistrer la version modifiée.

Les technologies utilisées sont :

Pour la lecture : un input type file et FileReader (voir aussi le guide Manipuler des fichiers depuis des applications web)
Pour l’écriture : Blob et createObjectURL

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Ouvrir, modifier, enregistrer un fichier</title>
  <style>
 
  textarea {
    display: block;
    border: solid thin #6cf;
    padding: 1px;
    width: 100%;
    max-height: 24em;
    overflow: auto;
  }
 
  </style>
</head>
<body>
 
<input type="file" />
 
<script> "use strict";
 
const regex = /<content>\s*{Nom_produit}\s*<\/content>/g;
 
function highlightText($textarea) {
  $textarea.focus();
  let match = regex.exec($textarea.value);
  if (match) {
    let j = regex.lastIndex;
    let i = j - match[0].length;
    $textarea.setSelectionRange(i, j);
    regex.lastIndex = 0;
  }
}
 
document.querySelector("input[type=file]")
  .addEventListener("change", (event) => {
    let file = event.target.files[0];
    if (!file) {
      console.log("Aucun fichier sélectionné");
      return;
    }
    else {
      console.log(file);
      let reader = new FileReader();
 
      reader.onload = () => {
        let $ta = document.querySelector("textarea");
        let $button = document.querySelector("button");
        if (!$ta) {
          $ta = document.createElement("textarea");
          $ta.cols = 80;
          $ta.rows = 15;
          $button = document.createElement("button");
          $button.textContent = "Enregistrer";
 
          document.body.append($ta, $button);
 
          $button.onclick = () => {
            let blob = new Blob([ $ta.value ], { type: "text/xml" });
            let blobUrl = URL.createObjectURL(blob);
 
            let $a = document.createElement("a");
            $a.download = file.name;
            $a.href = blobUrl;
 
            document.body.append($a);
            $a.click();
            $a.remove();
            URL.revokeObjectURL(blobUrl);
          };
        }
 
        $ta.value = reader.result;
        highlightText($ta);
      };
 
      reader.readAsText(file);
    }
  });
 
</script>
</body>
</html>

Testé avec Firefox 62 – je ne garantis pas que ça fonctionne partout.

21/09/2018, 20h28
eleydet

Bonsoir,

Watilin a écrit :

Citation:

Les technologies utilisées sont :
- ...
- Pour l’écriture : Blob et createObjectURL

Et une pirouette aussi : On demande à JS de créer un lien, de cliquer dessus, puis de détruire le lien!
27/09/2018, 10h29
ynoury

Merci à tous pour votre aide...:D