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

📅  最后修改于: 2021-10-29 04:15:22             🧑  作者: Mango

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

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

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

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

  • 索引.html:
    
    
      
    
        Text file reading
        
        
      
    
    
      
    
        
            

              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。