Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Manejando Texto con javaScript

JavaScript - Manejando Texto con javaScript

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Manejando Texto con javaScript

Publicado por Luis (10 intervenciones) el 07/05/2022 12:19:35
Buenas, ojala me puedan ayudar. Tengo este codigo:

var cajadatos;
function iniciar() {
cajadatos = document.getElementById("cajadatos");
var archivos = document.getElementById("archivos");
archivos.addEventListener("change", procesar);
}
function procesar(evento) {
var archivos = evento.target.files;
var archivo = archivos[0];
var lector = new FileReader();
lector.addEventListener("load", mostrar);
lector.readAsText(archivo);
}
function mostrar(evento) {
var resultado = evento.target.result;
cajadatos.innerHTML = resultado;
}
window.addEventListener("load", iniciar);


que lo que hace es mostrar un texto de un archivo por la web ... el problema es que he probado textos en los que venian palabras entre los signos < y > ignorandolos por completo (osea que si en el texto aparece "mi <perro> boby" solo me sacaria "mi boby" . Me pueden ayudar para que salga todo los caracteres y todo el texto por favor?

Saludos y gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Manejando Texto con javaScript

Publicado por Ivan (118 intervenciones) el 07/05/2022 20:39:57
Hola,

interesante tu ejercicio, he disfrutado haciéndolo y lo he adaptado para poder subir múltiples archivos.
En cuanto a tu problema es que usar innerHTML detecta <> como tags HTML y los transforma a etiquetas HTML, hay que "escaparlos" como &amp, &lt y &gt, etc.

He creado una función doble, para escapar los tags y para cambiar los saltos de linea \n a <br>

Aunque he tuneado bastante tu código espero que te sirva

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
<!DOCTYPE html>
<head>
  <title>Lector de archivos de texto JavaScript</title>
  <script>
    // Función para escapar entidades html
    function escapeHTML(html) {
      var fn = function(tag) {
        var charsToReplace = {
          '&' : '&amp;',
          '<' : '&lt;',
          '>' : '&gt;',
          '"' : '&#34;'
        };
        return charsToReplace[tag] || tag;
      }
      return html.replace(/[&<>"]/g, fn);
    }
    // Función para leer archivos de texto
    function procesar() {
      // Obtenemos los archivos del form y creamos un lector para cada archivo
      var files = document.getElementById("myFiles").files;
      for(var i=0; i<files.length; i++) {
        var reader = new FileReader();
        reader.fileName = files[i].name;
        // Hay que crear un evento onload para mostrar el contenido una vez leído
        reader.onload = function(e) {
          // Mostramos los datos leídos y "filtrados" a HTML en un nuevo párrafo
          var p = document.createElement("p");
          document.body.appendChild(p);
          p.innerHTML = "Contenido del archivo: " + e.target.fileName + "<br>" + escapeHTML(e.target.result).replaceAll("\n", "<br>");
        };
        // Leemos el archivo
        reader.readAsText(files[i]);
      }
    }
  </script>
</head>
 
<body>
  <h1>Lector JavaScript</h1>
  <p>Ejemplo de Lector de archivos de texto JavaScript</p>
  <label>Mi archivo: <input id="myFiles" type="file" onchange="procesar()" multiple /></label>
</body>
</html>

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Manejando Texto con javaScript

Publicado por Luis (10 intervenciones) el 23/05/2022 15:12:27
GRACIAS por tu ayuda! saludos cordiales
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar