如何将文本文件的内容加载到 JavaScript 变量中？

在本文中，我们将研究如何使用 JavaScript 将计算机上存在的任何文本文件的内容读入变量。

以下是大家看代码前应该刷过的几个基本提示：

• 事件侦听器：这些是 JavaScript 中存在的预定义函数。它们有两个参数，第一个是元素应该寻找/监听的事件，第二个是如果第一个参数中提到的事件发生时元素应该执行的操作。
• 正则表达式：正则表达式是一个字符序列。每个正则表达式都定义了一种可用于多种用途的特定模式。最常见的一种是模式匹配。如上所述，正则表达式最常用于模式匹配，在发现预期的字符模式后，可以对其应用许多函数，例如split() 、 join() 、 replace()等。

示例：在此示例中，我们将只创建一个文本区域，其中文本将出现在index.html 中用作输入的文本文件中。 JavaScript 代码将能够从任何文本文件中提取文本并将其显示在script.js 中。

索引.html：

  

    Text file reading
    
    
  


    div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
      
    input {
        margin-top: 10px;
    }
      
    textarea {
        margin-top: 15px;
        width: 70%;
    }

  

    
        
          GeeksforGeeks
        
        
            
                        
        
    
    

  

脚本.js：

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

输出：

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。