Comment lire un fichier texte local à l'aide de JavaScript?

En JavaScript, plusieurs packages et API sont disponibles qui permettent à l'utilisateur de lire les données à partir d'un fichier placé localement. Deux des plus célèbres de ces bibliothèques sont

1. Package du système de fichiers: permet aux programmes JavaScript de lire les fichiers du système
2. API FileReaderWeb: permet de travailler avec des fichiers à partir d'une page Web HTML.

Comme vous pouvez le voir, les deux fonctionnent différemment; L'un fonctionne pour une page Web HTML et l'autre pour les programmes JavaScript locaux.

Package du système de fichiers pour la lecture de fichiers sur votre bureau

Le package du système de fichiers est livré avec l'environnement de nœud par défaut pour les programmes JavaScript hébergés localement. Cependant, vous devez toujours inclure le package du système de fichiers dans votre code JavaScript en utilisant le mot-clé requis. Après cela, la fonction readFile () Inclus dans ce package vous permet de lire les données d'un fichier.

Syntaxe de la méthode ReadFile ()
La syntaxe de la méthode readFile () est donnée comme:

Filesystemvar.ReadFile (pathTotheFile, Options, callbackFunction);

Les détails de cette syntaxe sont comme:

• FileSyStamvar: C'est la variable qui a été définie égale exiger un système de fichiers emballer
• Pathtothefile: C'est le chemin du fichier que vous souhaitez lire
• Options: Ce sont les options facultatives qui peuvent filtrer le codage et d'autres attributs du fichier
• CallbackFunction: Une fonction de rappel qui sera exécutée sur une lecture réussie du fichier

Exemple 1: Lire un fichier avec un package de système de fichiers

Commencez par créer un nouveau fichier texte sur votre ordinateur et placez du texte à l'intérieur comme

Après cela, dirigez-vous à l'intérieur de votre fichier JavaScript et incluez le package du système de fichiers à l'aide du mot-clé requise:

const fs = require ("fs");

Utilisez ensuite les lignes suivantes:

FS.ReadFile ("démo.txt ", (err, data) =>
si (err) jetez ERR;
console.journal (données.toString ());
);

Les étapes suivantes sont effectuées dans le code mentionné ci-dessus:

• Lisez le fichier "démo.SMS"
• S'il y a une erreur, jetez ce message d'erreur sur le terminal
• En cas d'erreur, stockez les données lues dans le fichier dans le données variable
• Imprimez le contenu du données variable après avoir converti en chaîne en utilisant le toString () méthode

Lors de l'exécution du code, vous observerez la sortie suivante sur votre terminal:

Les données du fichier ont été imprimées sur le terminal.

API Web FileReader pour la lecture de fichiers sur une page Web HTML

L'API du lecteur de fichiers ne fonctionne qu'avec des pages Web HTML, et l'une des restrictions de cette API est qu'elle fonctionne sur les fichiers qui ont été lus par <Type d'entrée = «Fichier»> balise. Il a plusieurs fonctions qui permettent à l'utilisateur de lire le fichier dans différents encodages.

Exemple 2: Lire un fichier texte local à partir d'une page Web HTML

Commencez par configurer une page Web HTML, pour cela, utilisez les lignes suivantes:

Vous obtiendrez la page Web suivante sur votre navigateur:

Après cela, rendez-vous sur le fichier JavaScript et notez les lignes de code suivantes:

document.GetElementById ("InputFileToread")
.addEventListener ("change", function ()
var fr = new FileReader ();
frousser.readastext (ceci.fichiers [0]);
frousser.onload = function ()
console.journal (FR.résultat);
;
);

Les étapes suivantes sont effectuées dans le code mentionné ci-dessus:

• Un auditeur d'action est appliqué sur votre avec l'identifiant "inputFileToread"
• Puis un objet de lecteur de fichiers (FR) a été créé à l'aide du constructeur FileReader ()
• Puis le premier fichier sur le est lu comme un texte en utilisant le frousser variable
• Une fois la lecture réussie du fichier, ces données sont imprimées sur la console

Pour le démontrer, sélectionnez le même fichier sélectionné dans le premier exemple et vous obtiendrez le résultat suivant sur la console de votre navigateur:

Le résultat montre que le fichier a été lu avec succès par la page Web HTML.

Conclusion

Pour lire un fichier texte placé localement, nous avons deux options: pour charger le fichier en HTML ou pour lire ce fichier dans votre programme JavaScript de bureau. Pour cela, vous disposez d'une API Web de Reader de fichiers pour les pages Web et un package de système de fichiers pour le bureau JavaScript. Essentiellement, ceux-ci effectuent la même opération: lire un fichier texte. Dans ce didacticiel, vous avez utilisé la fonction readFile () à partir du package du système de fichiers et de readFileStext () de l'API Web de fichier Reader.