首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在js中读取txt文件并在不同的div中打印它的行

在JavaScript中,可以使用XMLHttpRequest对象或fetch API来读取txt文件并将其行打印到不同的div中。

使用XMLHttpRequest对象的示例代码如下:

代码语言:txt
复制
function readTxtFile(fileUrl, divIds) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', fileUrl, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var lines = xhr.responseText.split('\n');
      for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        if (line !== '') {
          var divId = divIds[i % divIds.length];
          var div = document.getElementById(divId);
          div.innerHTML += line + '<br>';
        }
      }
    }
  };
  xhr.send();
}

// 调用示例
var fileUrl = 'example.txt'; // txt文件的URL
var divIds = ['div1', 'div2', 'div3']; // 不同div的id数组
readTxtFile(fileUrl, divIds);

使用fetch API的示例代码如下:

代码语言:txt
复制
function readTxtFile(fileUrl, divIds) {
  fetch(fileUrl)
    .then(response => response.text())
    .then(text => {
      var lines = text.split('\n');
      for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        if (line !== '') {
          var divId = divIds[i % divIds.length];
          var div = document.getElementById(divId);
          div.innerHTML += line + '<br>';
        }
      }
    })
    .catch(error => console.log(error));
}

// 调用示例
var fileUrl = 'example.txt'; // txt文件的URL
var divIds = ['div1', 'div2', 'div3']; // 不同div的id数组
readTxtFile(fileUrl, divIds);

以上代码中,readTxtFile函数接受两个参数:txt文件的URL和不同div的id数组。它通过XMLHttpRequest对象或fetch API发送GET请求获取txt文件的内容,并将内容按行分割后打印到不同的div中。divIds数组用于指定不同的div,如果行数多于div的数量,会循环使用div。

请注意,以上代码仅演示了如何在JavaScript中读取txt文件并打印到不同的div中,实际应用中可能需要根据具体需求进行适当的修改和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券