Прочтите файл .txt и выведите его в формате <p>HTML (с JS)

Question

Я перепробовал множество возможностей, но большинство из них не работают или требуют модулей , но я не знаю, как это сделать в vanilla javascript .. Мне действительно нужна помощь .. Спасибо. (Извините за мой плохой английский sh, я француз)

Мой сценарий: (на самом деле не работает, просто прочтите)

<script type="text/javascript">
  var fso, ts, s;
  fso = new ActiveXObject("Scripting.FileSystemObject");
  f1 = fso.OpenTextFile("pub.txt", 1);
  s = ts.ReadLine();
</script>

Answer 1

document.querySelector("input[type='file']").addEventListener("change", function(){
    if(this.files[0]){
      this.files[0].text()
        .then(val => {
          document.querySelector("p").textContent = val;
        })
    }
})

<label>Pick One Text File</label><br/>
<input type="file" accept="text/plain" multiple="false"> <br/>

<label>File Will Show up here in the text box</label><br/><br/>
<p></p>

Answer 2

Попробуйте!

<input type="file" onchange="readFile(this)" />

<script>
  function readFile(input) {
    let file = input.files[0];

    let reader = new FileReader();

    reader.readAsText(file);

    reader.onload = function () {
      document.getElementById("app").innerHTML = `<p>${reader.result}</p>`;
    };

    reader.onerror = function () {
      console.log(reader.error);
    };
  }
</script>

Answer 3

Чтение текстового файла:

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file  

Использование Jquery:

$("#div7").load("ajax.txt"); 

Answer 4

Edit: рабочий пример здесь https://codepen.io/engeslamadell/pen/WNrVPeG

вы пробовали это

<script type="text/javascript"> 
//this is the input with type file
    document.getElementById('inputfile') 
        .addEventListener('change', function() { 
          
        var fr=new FileReader(); 
        fr.onload=function(){ 
            document.getElementById('output') 
                    .textContent=fr.result; 
        } 
          
        fr.readAsText(this.files[0]); 
    }) 
</script> 

у вас также есть эти FileReader методы FileReader.readAsArrayBuffer(): читает содержимое указанного входного файла. Атрибут результата содержит ArrayBuffer, представляющий данные файла. FileReader.readAsBinaryString(): Считывает содержимое указанного входного файла. Атрибут результата содержит необработанные двоичные данные из файла в виде строки. FileReader.readAsDataURL(): читает содержимое указанного входного файла. Атрибут результата содержит URL-адрес, представляющий данные файла. FileReader.readAsText(): Считывает содержимое указанного входного файла. Атрибут результата содержит содержимое файла в виде текстовой строки. Этот метод может принимать версию кодировки в качестве второго аргумента (если требуется). Кодировка по умолчанию - UTF-8.

источник: https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/