javascript读取文本txt内容赋值到页面元素
  • 分享到微信朋友圈
    X
立即下载 查看演示

用JavaScript读取txt文件的方法

在Web开发中，有的时候我们需要通过JavaScript来读取文本文件的内容，例如txt文件。 这可以帮助我们实现一些文件处理的功能，比如读取配置文件、日志文件等。下面将介绍如何使用JavaScript来读取txt文件，并给出代码示例。

使用Fetch API

Fetch API提供了一个现代的方式来发起网络请求，并且支持Promise，使得代码更加简洁和易于理解。

代码示例

<script>  
    const filePath = 'txt/1.txt';
    fetch(filePath)
        .then(response => response.text())
        .then(data => {
            textbox.innerHTML = data.replace(/\n/g, '<br>');
        }); 
         
</script>

Fetch API适用于读取服务器上的文件。

Fetch API有以下优点：

  • 更加简洁：相较于jQuery而言，Fetch API更加简洁明了，代码量更少。

  • 更加灵活：Fetch API支持ES6的Promise对象，可以轻松处理异步请求。

  • 更加强大：Fetch API支持CORS（跨域资源共享）和Service Worker（离线缓存）等功能。