En este artículo, examinaremos cómo leer el contenido de cualquier archivo de texto que exista en su computadora en una variable usando JavaScript. Los siguientes son algunos consejos básicos que todo el mundo debería repasar antes de mirar el código:
- Oyentes de eventos: estas son funciones predefinidas que existen en JavaScript. Toman dos argumentos, el primero es el evento que un elemento debe buscar/escuchar y el segundo es la acción que el elemento debe realizar si ocurre el evento mencionado en el primer argumento.
- Expresiones regulares: una expresión regular es una secuencia de caracteres. Cada expresión regular define un cierto patrón que puede usarse para múltiples propósitos. El más común es la coincidencia de patrones. Como se mencionó anteriormente, las expresiones regulares se usan más comúnmente para la coincidencia de patrones y, una vez que se detecta el patrón esperado de caracteres, se pueden aplicar muchas funciones, como split() , join() , replace() , etc.
Ejemplo: en este ejemplo, simplemente crearemos un área de texto donde aparecerá el texto del archivo de texto que se ha utilizado como entrada en index.html . El código JavaScript podrá extraer el texto de cualquier archivo de texto y mostrarlo en script.js .
- índice.html:
html
<!DOCTYPE html>
<html>
<head>
<title>Text file reading</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<style type="text/css">
div {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin-top: 10px;
}
textarea {
margin-top: 15px;
width: 70%;
}
</style>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div>
<input type="file">
<textarea cols="30" rows="20"
placeholder="text will appear here">
</textarea>
</div>
</center>
<script src="script.js"></script>
</body>
</html>
- secuencia de comandos.js:
javascript
let input = document.querySelector('input')
let textarea = document.querySelector('textarea')
// This event listener has been implemented to identify a
// Change in the input section of the html code
// It will be triggered when a file is chosen.
input.addEventListener('change', () => {
let files = input.files;
if (files.length == 0) return;
/* If any further modifications have to be made on the
Extracted text. The text can be accessed using the
file variable. But since this is const, it is a read
only variable, hence immutable. To make any changes,
changing const to var, here and In the reader.onload
function would be advisible */
const file = files[0];
let reader = new FileReader();
reader.onload = (e) => {
const file = e.target.result;
// This is a regular expression to identify carriage
// Returns and line breaks
const lines = file.split(/\r\n|\n/);
textarea.value = lines.join('\n');
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
});
- Producción:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por ananya_reddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA