txt 파일을 읽고 html의 javascript로 배열에 저장하는 방법

Aschoolar

이에 대한 많은 해결책이 있지만 html 웹 페이지의 javascript에서 거의 또는 전혀 발견하지 못했습니다. 내 html 파일이있는 곳에 sample.txt라는 데이터 파일이 있습니다. 내 목표는 테이블을 만들고 html 파일에 표시하는 데 사용할 수있는 배열에 txt 파일을로드하는 것입니다. 내 sample.text 파일에는 다음 데이터가 있습니다.

 sin 0.2 time 0.22222
 cos 0.3 time 0.43434
 tan 0.1 time 0.22221

저는 Javascript를 처음 접했으며 다른 프로그래밍 언어보다 어렵다는 것을 인정합니다. 나는 node.js 모드의 자바 스크립트에 익숙하지만 html 모드는 아닙니다. html 웹 페이지 (아래 그림 참조)를 만들고 스크립트 모드에서 텍스트 및 숫자와 같은 기본 사항을 표시했습니다. 또한 스크립트 모드에서 버튼을 누른 후 txt 파일을로드하고 표시 할 수있었습니다. 이 txt로드 방법은 나를 위해 일한 유일한 방법이었습니다. require (js) 메소드가 작동하지 않거나 가져 오지 않았습니다. 이 작업 모드에서 데이터 배열을 어떻게 생성합니까?

아래는 내 전체 코드 (수정 됨)입니다.

  <!DOCTYPE html>
  <html>
  <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Read Text File</title> 
  </head> 

  <body> 
  <input type="file" name="inputfile"
        id="inputfile"> 
  <br> 

  <pre id="output"></pre> 
  <script>

  var file = document.getElementById('inputfile');

  file.addEventListener('change', () => {
  var txtArr = [];
  var fr = new FileReader();
  fr.onload = function() {
    // By lines
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
        txtArr = [...txtArr, ...(lines[line].split(" "))];
    }
   }
  fr.onloadend = function() {
    console.log(txtArr);
    document.getElementById('output').textContent=txtArr.join("");
    document.getElementById("output").innerHTML = txtArr[1]; 
    console.log(txtArr[1]);
  }

  fr.readAsText(file.files[0]);


  })

  </script>
  </body>
  </html> 
올드 수닐

를 사용 FileReader하여 문자열을 한 줄씩 가져온 다음 분할하고 다음과 같이 resultArr에 병합합니다.

var file = document.getElementById('inputfile');

file.addEventListener('change', () => {
    var txtArr = [];
    var fr = new FileReader();
    fr.onload = function() {
        // By lines
        var lines = this.result.split('\n');
        for (var line = 0; line < lines.length; line++) {
            txtArr = [...txtArr, ...(lines[line].split(" "))];
        }
    }
    fr.onloadend = function() {
        console.log(txtArr);
        document.getElementById('output').textContent=txtArr.join("");
    }

    fr.readAsText(file.files[0]);
})
<!DOCTYPE html> 
<html> 

<head> 
    <title>Read Text File</title> 
</head> 

<body> 
    <input type="file" name="inputfile"
            id="inputfile"> 
    <br> 

    <pre id="output"></pre> 
    
</body> 

</html> 

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

여러 좌표로 파일을 읽고 별도의 배열에 저장하는 방법은 무엇입니까?

분류에서Dev

Javascript에서 파일을 한 줄씩 읽고 배열에 저장하는 방법

분류에서Dev

Swift에서 Float 배열을 txt 파일로 저장하는 방법

분류에서Dev

30 차원 numpy 배열을 사람이 읽을 수있는 txt 파일에 파이썬으로 저장하는 방법은 무엇입니까?

분류에서Dev

txt 파일에 저장된 프로세스 값을 c의 4 개의 다른 배열에 저장하는 방법

분류에서Dev

.txt 파일을 읽고 값을 Java의 이중 배열에 저장

분류에서Dev

BASH는 txt 파일을 읽고 배열에 저장

분류에서Dev

BASH는 txt 파일을 읽고 배열에 저장

분류에서Dev

안드로이드에서 텍스트 파일을 읽고 배열에 저장하는 방법

분류에서Dev

파일 내용을 읽고 형식이 지정된 배열에 C #으로 저장하는 방법

분류에서Dev

C에서 txt 파일의 내용을 읽고 인쇄하는 방법

분류에서Dev

.txt 파일을 읽고 HTML로 표시하는 Javascript

분류에서Dev

jtable을 텍스트 파일에 저장하고 jtable로 다시 읽는 방법

분류에서Dev

txt 파일에서 데이터를 가져 오는 방법. 두 개의 변수로 분할하고이 데이터를 처음에 데이터를 저장하는 데 사용한 배열에 저장하고 수정합니다.

분류에서Dev

txt 파일의 내용을 배열로 가져 오는 방법

분류에서Dev

Grep : 출력을 두 개의 열로 분리하고 txt 파일에 저장

분류에서Dev

txt 파일을 구문 분석하고 세 개의 열로 나누는 방법

분류에서Dev

저장 프로 시저의 고정 너비 파일에서 열을 추출하는 방법

분류에서Dev

Javascript는 서버의 .txt 파일에 변수를 저장하고 .txt 내용을 덮어 씁니다.

분류에서Dev

.txt 파일을 항아리에 넣고 읽는 방법

분류에서Dev

ElectronJS로 .txt 파일을 읽는 방법?

분류에서Dev

스캐너 입력으로 슬래시 "/"가있는 txt 파일을 읽고 배열 / 문자열에 넣는 방법

분류에서Dev

file.csv에서 읽고 배열 C의 문자열에 모든 값을 저장하는 방법

분류에서Dev

.txt 파일에서 별도의 줄에있는 URL을 읽고 각각을 핑하는 방법

분류에서Dev

Java에서 .txt 파일의 변경 사항을 열고 수정하고 읽는 가장 간단한 방법은 무엇입니까?

분류에서Dev

xlsx 파일에서 읽고 특정 열 값을 Python의 배열에 저장하는 방법은 무엇입니까?

분류에서Dev

PHP로 .txt 파일에 텍스트 영역 내용을 저장하는 방법

분류에서Dev

내 서블릿을 사용하여 http URL에서 .txt 파일을 다운로드하고 읽는 방법

분류에서Dev

Android에서 기본적으로 내부 저장소의 파일을 읽고 쓰는 방법

Related 관련 기사

  1. 1

    여러 좌표로 파일을 읽고 별도의 배열에 저장하는 방법은 무엇입니까?

  2. 2

    Javascript에서 파일을 한 줄씩 읽고 배열에 저장하는 방법

  3. 3

    Swift에서 Float 배열을 txt 파일로 저장하는 방법

  4. 4

    30 차원 numpy 배열을 사람이 읽을 수있는 txt 파일에 파이썬으로 저장하는 방법은 무엇입니까?

  5. 5

    txt 파일에 저장된 프로세스 값을 c의 4 개의 다른 배열에 저장하는 방법

  6. 6

    .txt 파일을 읽고 값을 Java의 이중 배열에 저장

  7. 7

    BASH는 txt 파일을 읽고 배열에 저장

  8. 8

    BASH는 txt 파일을 읽고 배열에 저장

  9. 9

    안드로이드에서 텍스트 파일을 읽고 배열에 저장하는 방법

  10. 10

    파일 내용을 읽고 형식이 지정된 배열에 C #으로 저장하는 방법

  11. 11

    C에서 txt 파일의 내용을 읽고 인쇄하는 방법

  12. 12

    .txt 파일을 읽고 HTML로 표시하는 Javascript

  13. 13

    jtable을 텍스트 파일에 저장하고 jtable로 다시 읽는 방법

  14. 14

    txt 파일에서 데이터를 가져 오는 방법. 두 개의 변수로 분할하고이 데이터를 처음에 데이터를 저장하는 데 사용한 배열에 저장하고 수정합니다.

  15. 15

    txt 파일의 내용을 배열로 가져 오는 방법

  16. 16

    Grep : 출력을 두 개의 열로 분리하고 txt 파일에 저장

  17. 17

    txt 파일을 구문 분석하고 세 개의 열로 나누는 방법

  18. 18

    저장 프로 시저의 고정 너비 파일에서 열을 추출하는 방법

  19. 19

    Javascript는 서버의 .txt 파일에 변수를 저장하고 .txt 내용을 덮어 씁니다.

  20. 20

    .txt 파일을 항아리에 넣고 읽는 방법

  21. 21

    ElectronJS로 .txt 파일을 읽는 방법?

  22. 22

    스캐너 입력으로 슬래시 "/"가있는 txt 파일을 읽고 배열 / 문자열에 넣는 방법

  23. 23

    file.csv에서 읽고 배열 C의 문자열에 모든 값을 저장하는 방법

  24. 24

    .txt 파일에서 별도의 줄에있는 URL을 읽고 각각을 핑하는 방법

  25. 25

    Java에서 .txt 파일의 변경 사항을 열고 수정하고 읽는 가장 간단한 방법은 무엇입니까?

  26. 26

    xlsx 파일에서 읽고 특정 열 값을 Python의 배열에 저장하는 방법은 무엇입니까?

  27. 27

    PHP로 .txt 파일에 텍스트 영역 내용을 저장하는 방법

  28. 28

    내 서블릿을 사용하여 http URL에서 .txt 파일을 다운로드하고 읽는 방법

  29. 29

    Android에서 기본적으로 내부 저장소의 파일을 읽고 쓰는 방법

뜨겁다태그

보관