How to load the contents of a text file into a JavaScript variable?

In this article, we will examine how to read the contents of any text file that exists on your computer into a variable using JavaScript.

The following are a few basic pointers that everybody should brush through before looking at the code:

  • Event listeners: These are predefined functions that exist in JavaScript. They take two arguments, the first one is, the event that an element should look for/ listen to and the second one is, the action that the element should perform if the event mentioned in the first argument occurs.
  • Regular Expressions: A regular expression is a sequence of characters. Every regular expression defines a certain pattern that can be used for multiple purposes. The most common one being, pattern matching. As mentioned above Regular Expressions are most commonly used for pattern matching and after the expected pattern of characters is spotted, many functions can be applied on them, like split(), join(), replace() etc.

Example: In this example we will just create a text area where the text will appear from the text file that has been used as an input in the index.html. The JavaScript code will be able to extract the text from any text file and display it in script.js.

  • index.html:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • script.js:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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);
    });

    chevron_right

    
    

  • Output:

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.