Ouvrir, modifier et enregistrer un fichier xml tout en JavaScript

**ynoury** · 20/09/2018, 20h15

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.

Invité · 20/09/2018, 20h44

hello

avec nodejs.. minimalisme

Code :

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

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)

**ynoury** · 20/09/2018, 23h19

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

**eleydet** · 21/09/2018, 09h29

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.

Invité · 21/09/2018, 10h03

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

tu veux l'exécuter/interpréter comment ton 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...

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

**Watilin** · 21/09/2018, 13h14

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