首页
学习
活动
专区
工具
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中,实际应用中可能需要根据具体需求进行适当的修改和优化。

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

相关·内容

在Node.js如何逐行读取文件

在Node.js如何逐行读取文件 本文翻译自How to read a file line by line in Node.js 能够逐行读取文件为我们提供了一个读取大型文件机会,而无需将它们完全加载到内存...它还允许我们仅查找相关信息,并在找到该信息后停止搜索。 我们已经讨论了如何在Java逐行读取文件,让我们看一下Node.js逐行读取文件方式。...乍看起来,看起来很完美,但是有两个问题: 1.它是阻塞,这意味着它将阻塞程序执行,直到将整个文件加载到内存为止。 2.如果文件很大(千兆字节或更多),将对内存消耗产生严重影响。...line-reader模块提供了eachLine()方法,该方法读取给定文件每一。...需要一个带有两个参数回调函数:行内容和一个布尔值,指定读取是否为文件最后一

13.6K20
  • 【Python 入门第十九讲】文件处理

    每行代码都包含一个字符序列,它们形成一个文本文件文件每一都以一个特殊字符结尾,称为 EOL 或行尾字符,逗号{,} 或换行符。结束当前行,并告诉解释器新已经开始。...灵活性:Python 文件处理非常灵活,因为允许您处理不同文件类型(例如文本文件、二进制文件、CSV 文件等),并对文件执行不同操作(例如读取、写入、追加等)。...让我们看看如何在读取模式下读取文件内容。示例 1:open 命令将在读取模式下打开 Python 文件,for 循环将打印文件每一。# 以读取模式打开名为 "geek" 文件。...file = open('geek.txt', 'r')# 这将逐行打印文件每一。...当在代码中使用 readline() 时,它会读取文件下一并将其作为字符串返回。在此示例,我们将从名为 test.txt 文件逐行读取数据并将其打印到终端

    13010

    Go 1.16新特性-embed包及其使用

    通过//go:embed指令,可以在编译阶段将静态资源文件打包进编译好程序,并提供访问这些文件能力。...最常见方法(例如静态网站后端程序)要求将程序连同其所依赖html模板,css,js和图片以及静态资源路径一起上传到生产服务器。必须正确配置Web服务器,以便用户访问。...例如:在当前目录下新建文件 version.txt并在文件输入内容:0.0.1 package main import ( _ "embed" "fmt" ) //go:embed...只读取templates目录下txt文件,如下代码第9所示: package main import ( "embed" "fmt" "io/fs" ) //go:embed...不同之处在于编译后二进制程序文件在运行过程是否依赖static目录静态文件资源。 以下为验证步骤: 首先,使用编译到二进制文件方式。

    94700

    何在Node.js编写和运行您第一个程序

    此外,由于支持异步执行,Node.js擅长I / O密集型任务,这使得非常适合Web。 实时应用程序(视频流或连续发送和接收数据应用程序)在Node.js编写时可以更高效地运行。...要在macOS或Ubuntu 18.04上安装,请按照如何在macOS上安装Node.js和创建本地开发环境步骤或在Ubuntu 18.04上如何安装Node.js“使用PPA安装”部分步骤进行操作...log方法打印到stdout流,因此您可以在控制台中看到。 在Node.js上下文中, 流是可以接收数据对象,stdout流,或者可以输出数据对象,网络套接字或文件。...第二打印存储在args第一个元素环境变量; 也就是说,用户提供第一个命令行参数。...接受一个回调函数 ,用于迭代数组每个元素。 你在args数组上使用forEach ,为提供一个回调函数,用于在环境打印当前参数值。 保存并退出该文件

    8.7K30

    shell语法学习

    25.读取文件 Bash 脚本允许用户非常有效地读取文件。下面的示例将展示如何使用 shell 脚本读取文件。首先,创建一个名为 editors.txt 文件,其中包含以下内容。 1....Code Bash 此脚本将输出上述 5 每一。 #!...应该删除该文件。 27.附加到文件 下面的 shell 脚本示例将向您展示如何使用 bash 脚本将数据附加到文件系统上文件向早期 editors.txt 文件添加了一。 #!...此外,您需要提供文件目录名作为命令行参数。对当前工作目录使用句点(.)。 35.打印文件或目录数量 下面的 Linuxbash 脚本查找给定目录存在文件文件数量。...39.从文件删除重复 文件处理需要相当长时间,并在许多方面阻碍了管理员工作效率。例如,在文件搜索重复项可能会成为一项艰巨任务。

    1.2K40

    40 个简单又有效 Linux Shell 脚本示例

    25、读取文件 Bash 脚本允许用户非常有效地读取文件。下面的示例将展示如何使用 shell 脚本读取文件。首先,创建一个名为 editors.txt 文件,其中包含以下内容。 1....Code 此脚本将输出上述 5 每一。 #!...应该删除该文件。 27、附加到文件 下面的 shell 脚本示例将向您展示如何使用 bash 脚本将数据附加到文件系统上文件向早期 editors.txt 文件添加了一。 #!...此外,您需要提供文件目录名作为命令行参数。对当前工作目录使用句点(.)。 35、打印文件或目录数量 下面的 Linuxbash 脚本查找给定目录存在文件文件数量。...39、从文件删除重复 文件处理需要相当长时间,并在许多方面阻碍了管理员工作效率。例如,在文件搜索重复项可能会成为一项艰巨任务。

    30910

    实用干货:7个实例教你从PDF、Word和网页中提取数据

    我们还将学习如何从不同来源提取原始文本,对其进行规范化,并基于创建一个用户定义语料库。 在本文中,你将学习7个不同实例。我们将学习从PDF文件、Word文档和Web获取数据。...(7)现在我们将要读取一个DOCX文件并使用我们在word.py实现API打印输出全部内容。...第三打印出了文档第二段内容。而第四将会打印出第二段样式,比如在这个例子样式就是Title类型。...第二代码将打印输出文件1.txt句子。第三代码将打印输出文件0.txt段落: Output: ['Five', 'months', '....第二是1.txt文件中所有句子组成列表,其中每个句子都是由该句子单词组成列表。 第三是0.txt文件中所有段落组成列表,其中每个段落对象又是由该段落句子组成列表。

    5.3K30

    Python与Excel协同应用初学者指南

    标签:Python与Excel协同 本文将探讨学习如何在Python读取和导入Excel文件,将数据写入这些电子表格,并找到最好软件包来做这些事。...数据可能位于Excel文件,也可能使用.csv、.txt、.JSON等文件扩展名来保存。数据可以是定性,也可以是定量。根据计划解决问题类型,数据类型可能会有所不同。...可以在下面看到工作原理: 图15 已经为在特定列具有值行检索了值,但是如果要打印文件而不只是关注一列,需要做什么? 当然,可以使用另一个for循环。...然后,对于位于该区域每个单元格,打印该单元格包含坐标和值。每行结束后,将打印一条消息,表明cellObj区域打印。...,即标题(cols)和txt); 4.接下来,有一个for循环,它将迭代数据并将所有值填充到文件:对于从0到4每个元素,都要逐行填充值;指定一个row元素,该元素在每次循环增量时都会转到下一;

    17.4K20

    学习Python文件操作:读写、追加和删除文件

    在本文中,我们将详细介绍如何在Python中进行文件读写、追加和删除操作,并给出一些应用场景。文件读取在Python,可以使用open()函数来打开一个文件,并返回一个文件对象。...然后,通过read()方法读取文件全部内容,并将内容保存在变量content。最后,我们打印文件内容,并使用close()方法关闭文件。...另外,还有其他读取文件方法,readline()可以逐行读取文件内容,readlines()可以将文件内容按读取并保存到一个列表。你可以根据需要选择适合方法来读取文件。...file.close()在上述示例,我们使用追加模式("a")打开了一个名为example.txt文件,并使用write()方法在文件末尾追加了一文本。...数据持久化在实际开发,我们通常需要将数据保存到文件,以便长期存储和后续处理。通过文件操作,我们可以将数据写入文件并在需要时进行读取,实现数据持久化。4.

    49130

    【React】243- 在 React 组件中使用 Refs 指南

    示例如下: 在这个例子,我们创建了一个 input 输入框来输入值。然后,当单击提交按钮时,我们将读取此值,并在控制台打印。...在 render 函数,我们希望读取 form 下输入框值。我们如何读取这个值? 通过为 input 指定一个 ref ,然后读取 ref 值。...,并在控制台打印输入框信息。...译注:这里可以看一下 React 对于事件处理:在 React 另一个不同点是你不能通过返回 false 方式阻止默认行为。...在上面的示例应用程序,会将所有 input 标签输入值在控制台打印。这里已经为 input 标签设置了 ref 属性,接下来,让我们看一下需要如何在高阶组件传递 / 转发 ref 。

    3.9K30

    Firebug Command Line 使用技巧

    firebug中有两种类型命令行:1、单行模式;2、多行模式; 1、单行模式。单行模式是firebug默认命令行模式,允许我们一次输入一代码。单行模式优点是支持自动完成。     ...对了,他用法就和Prototype$一样,在单行模式,命令会将选择元素打印到console     在多行模式,你就完全可以像在Prototype那样使用它了。     ...例如在一个包含多个pdiv,我们可以用下面的代码获得每个p。     ...var obj = $x('html/body/div/p');     dir(obj); 5、dirxml(note)。     打印xml或HTML元素树形结构。...这个就和console.profile()是一样,用来记录页面js执行情况     并在结束后给出分析报告。 最后,希望每一位使用firebug来开发同学,能够提高自己开发效率。

    55130

    图形编辑器基于Paper.js教程15:在Paper.js实现拖拽图片导入画布功能

    在这篇文章,我们将探讨如何使用Paper.js和HTML5拖放API,来实现将图片文件直接拖拽并导入到Paper.js画布。.../tool.js"> 在这个结构,我们创建了一个用于拖放区域元素,并在其中嵌入了一个画布来显示导入图片。...,默认行为(打开文件)会被阻止,并为区域添加一个可视化提示(改变边框或背景颜色)。...这样可以在不依赖服务器情况下,将文件直接加载到页面。 Image对象:读取完成后,创建一个新Image对象,并将其src属性设置为读取结果。这会触发图片加载过程。...这个功能可以扩展到更多文件类型和更多复杂操作,例如对导入图像进行编辑或处理。 希望通过本文讲解,您对如何在Web项目中实现类似功能有了更深入理解。

    12910

    使用awk和正则表达式过滤文件文本或字符串

    当我们在 Unix/Linux 运行某些命令来读取或编辑字符串或文件文本时,我们很多时候都会查找指定特征字符串。这可能会使用正则表达式。 什么是正则表达式?...[character(s)]匹配字符中指定任何一个字符,也可以使用连字符(-)表示一系列字符,例如[a-f]、[1-5]等。 ^ 匹配文件中一开头。 $ 匹配文件行尾。...工作原理是读取文件给定,制作该行副本,然后在该行上执行脚本。这在文件所有上重复。...使用 awk 一个简单示例: 下面的示例打印/etc/hosts文件所有,因为没有给出模式。...在下面的示例,第一个命令打印文件所有,第二个命令不打印任何内容,因为我想匹配具有 $25.00,但没有使用转义字符。 第三个命令是正确,因为已使用转义字符读取 $ 照原样。

    2.3K10

    从零开始配置 vim(7)——自动命令

    定义一个自动命令格式如下 autocmd type pattern cmd autocmd: 自动命令以 autocmd 关键字开始,作用类似与 js 定义函数时使用 function 关键字...因为打开一个不存在文件时 vim 并没有真的在磁盘创建这么一个文件仅仅新开了一个缓冲区,当执行写命令时候才真正会创建文件。我们使用 q!...退出的话,它是不会往文件 我们来试试修改这一为,打开新文件时候就创建,也就是打开一个新文件时候就执行写操作。打开新文件事件使用 BufNewFile 来表示。...我们在 html 文件输入 hello!...我们暂时不讲如何在 lua 添加自动命令,这里我们先尝试启用 init.vim 文件

    1.3K20

    关于“Python”核心知识点整理大全23

    要以任何方式使用 文件——哪怕仅仅是打印其内容,都得先打开文件,这样才能访问。函数open()接受一个参数: 要打开文件名称。Python在当前执行文件所在目录查找指定文件。...这样,通过打印contents 值,就可将这个文本文件全部内容显示出来: 3.1415926535 8979323846 2643383279 相比于原始文件,该输出唯一不同地方是末尾多了一个空行...10.1.3 逐行读取 读取文件时,常常需要检查其中每一:你可能要在文件查找特定信息,或者要以 某种方式修改文件文本。...例如,你可能要遍历一个包含天气数据文件,并使用天气描述 包含字样sunny。在新闻报道,你可能会查找包含标签,并按特定格 式设置。...在处,我们使用一个简单 for循环来打印lines各行。由于列表lines每个元素都对应于文件,因此输出 与文件内容完全一致。

    12510

    如何使用Vue.js和Axios来显示API数据

    在这个文件,添加下面的HTML标记,定义了一个HTML框架,并从内容交付网络(CDN)中提取Foundation CSS框架和Vue.js库。...在浏览器打开此文件。 您将在屏幕上看到以下输出,其中显示模拟数据: 我们以美元显示价格。 要以额外货币(例如欧元)显示,我们将在数据模型添加另一个键值对,并在标记添加另一列。...然后在与index.html文件相同目录创建vueApp.js文件。...当API成功返回数据时,将执行该块内代码,并将数据保存到我们results变量。 保存文件并在Web浏览器重新加载index.html页面。 这次您会看到加密货币的当前价格。...结论 在少于五十,您只使用三个工具创建了一个耗用API应用程序:Vue.js,Axios和Cryptocompare API。

    8.8K20
    领券