Tengo un problema con el código javascript. Tengo que hacer html local que muestre líneas de texto del archivo .txt. Encontré un código como este, que lo hace:
<script> var fileInput = document.getElementById('inputfile'); fileInput.addEventListener('change', function(e) { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function(e) { document.getElementById('output').innerText = reader.result; }; reader.readAsText(file); }); </script>Sin embargo, necesito que se muestren como en este código:
<script type="text/javascript"> var arr = ['Heading 1','Para1','Heading 2','Para2','Heading 3','Para3']; var result = arr.map((val, i) => i%2===0 ? `<h2>${val}</h2>` : `<p>${val}</p>`).join(''); document.getElementById('test').innerHTML = result ; </script>No importa cómo intente combinar estos dos, no parece funcionar (no se muestra nada en absoluto). Soy bastante inexperto con respecto a javascirpt, entonces, ¿alguien podría ayudarme con eso y, si es posible, explicarme en un lenguaje bastante simple cómo se supone que se debe hacer?
El archivo .txt se vería así:
Position1 description1 position2 description2 pozition3 ...Su resultado de reader.result en el primer ejemplo es una sola cadena de varias líneas. Para que su segundo fragmento funcione, necesita una matriz de cadenas, una por línea.
Así es como puede dividir su archivo de texto de varias líneas en una matriz de líneas:
const txtFile = `Position1 description1 position2 description2 pozition3`; const lines = txtFile.split("\n"); console.log(lines); Una vez que tenga estas líneas, puede proceder como ya mostró. Una advertencia: al usar innerHTML , corre el riesgo de inyectar cosas en su documento que quizás no desee. En la mayoría de los casos, es mejor construir los elementos HTML en código y usar innerText :
const txt = `Hello This is a paragraph Heading Injected scripts! <img src=x onerror="console.log(1234)">`; const lines = txt.split("\n"); // "Safe" approach: display contents as text // This will _not_ log 1234 lines.forEach( (content, i) => { const el = document.createElement(i % 2 === 0 ? "h2" : "p"); el.innerText = content; document.body.appendChild(el); } ); // "Unsafe" approach: use innerHTML // This _will_ log 1234 lines.forEach( (content, i) => { const tag = i % 2 === 0 ? "h2" : "p"; document.body.innerHTML += `<${tag}>${content}</${tag}>` } )