Gestión de Archivos TXT en HTML y JavaScript
Lanzarse a la aventura de editar o manipular archivos txt desde HTML utilizando JavaScript puede parecer, a primera vista, algo realmente complicado. Sin embargo, con las herramientas correctas y los consejos adecuados, puede ser mucho más sencillo de lo que parece.
¿Por qué necesitamos JavaScript?
El HTML por sí mismo no tiene la capacidad para editar archivos TXT o cualquier otro tipo de archivo. Esto es debido a que HTML está diseñado principalmente para estructurar y presentar contenidos en la web, no para interactuar con los archivos del sistema.
Aquí es donde entra en juego JavaScript, uno de los lenguajes de programación más utilizados en el desarrollo web y única opción disponible para la manipulación del lado del cliente. JavaScript puede proporcionar la funcionalidad necesaria para interactuar con los archivos y obtener, editar o incluso crear información dentro de ellos.
El Objeto File API
Para interactuar con los archivos en JavaScript, necesitamos utilizar lo que se conoce como la API File. Esta API proporciona una serie de objetos y métodos que nos permiten trabajar con los archivos.
var inputFile = document.querySelector('input[type="file"]');
inputFile.addEventListener('change', function(event) {
var fileList = event.target.files;
En el código anterior, comenzamos seleccionando el elemento de entrada del archivo. Luego, agregamos un evento de escucha que se dispara cuando se selecciona un archivo. Finalmente, obtenemos una lista de los archivos seleccionados a través del atributo files.
Lectura de un archivo txt
La lectura de un archivo txt se realiza utilizando el objeto FileReader, que forma parte de la API File. Veamos cómo podemos utilizarla:
var reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.log("Error: " + event.target.error);
};
reader.readAsText(fileList[0]);
En primer lugar, creamos un nuevo objeto FileReader. Luego, definimos dos funciones de callback. La primera se dispara cuando la lectura del archivo ha sido completada con éxito. La segunda función se dispara en caso de que ocurra un error durante la lectura del archivo. Finalmente, llamamos al método readAsText, que comienza la lectura del archivo.
Editar un archivo txt
Ahora que ya sabemos cómo leer un archivo, es hora de aprender a editar uno. Debes tener en cuenta que JavaScript no puede editar directamente un archivo en el sistema de archivos del usuario debido a restricciones de seguridad. Sin embargo, podemos manipular los datos leídos, crear un nuevo Blob y finalmente descargarlo como un nuevo archivo:
var updatedContents = contents.replace('old text', 'new text');
var blob = new Blob([updatedContents], {type: 'text/plain'});
var downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'updatedfile.txt';
downloadLink.click();
El código anterior crea primero una versión modificada de los contenidos del archivo, reemplazando un texto antiguo por uno nuevo. Luego, crea un nuevo Blob con los contenidos modificados y define su tipo como texto plano. Después, creamos un elemento de enlace, definimos su URL como la del nuevo Blob y hacemos que se descargue como un archivo .txt con un nombre específico. Finalmente, hacemos clic en el enlace para iniciar la descarga.
Finalizando
Como has podido comprobar a lo largo del artículo, editar archivos txt desde HTML con ayuda de JavaScript es un proceso que, con las explicaciones y ejemplos adecuados, puede ser mucho menos intimidante de lo que parece.