JS读取与解析本地文本类文件

不裁_caiii
7,165 阅读2分钟

JS可以通过浏览器内置的File API读取和解析本地文本类文件，包括CSV、TXT、JSON、XML等格式的文本文件。

读取本地文本类文件

  1. 创建文件读入对象

在JS中，我们可以使用浏览器提供的File API来读取本地文本类文件。File API提供了一个FileReader对象，用于读取文件。下面是创建FileReader对象的代码：

var reader = new FileReader();
  1. 获取文件内容

获取文件内容需要使用FileReader的readAsText()方法，该方法会异步读取文件，并将文件内容以字符串形式返回。

reader.readAsText(file);

其中，file是一个File对象，表示要读取的文件。File对象可以通过input元素的files属性获取。

<input id="myFileInput" type="file">

var fileInput = document.getElementById("myFileInput");

var file = fileInput.files[0];

var reader = new FileReader();

reader.readAsText(file);
  1. 监听文件读取完成事件

由于文件读取是异步的，我们需要在读取完成后获取到文件内容。因此，我们需要监听FileReader对象的load事件，这个事件在文件读取完成后触发。下面是代码示例：

reader.addEventListener("load", function () {
    var content = reader.result;
    console.log(content);
});

可以看到，我们通过result属性获取了文件内容，并将其输出到控制台。

解析本地文本类文件

在JS中，我们可以使用正则表达式和Split()方法来解析本地文本类文件。

  1. 解析CSV文件

CSV（Comma-Separated Values）是一种通用的文件格式，在数据存储和交换中广泛应用。在CSV文件中，每行表示一个记录，每个记录由多个字段组成，各字段之间以逗号分隔。下面介绍如何使用JS解析CSV文件。

Name,Age,Gender
Tom,20,Male
Jane,18,Female

var csvContent = "Name,Age,Gender\nTom,20,Male\nJane,18,Female";

var records = csvContent.split("\n");

var result = [];

for (var i = 1; i < records.length; i++) {
    var fields = records[i].split(",");
    var record = {
        name: fields[0],
        age: parseInt(fields[1]),
        gender: fields[2]
    };
    result.push(record);
}

console.log(result);

解析过程：

使用Split()方法将CSV文件按行切分成字符串数组records。 从第二行开始遍历records，使用Split()方法将当前行的数据按逗号切分成字段数组fields。 构造一个符合需求的对象record，并将其添加到结果数组中。

  1. 解析JSON文件

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在Web应用程序中广泛使用。在JSON文件中，数据以键值对的形式存储，各项之间用逗号分隔，整个文件用大括号包围。下面介绍如何使用JS解析JSON文件。

{
    "name": "Tom",
    "age": 20,
    "gender": "Male"
}

var jsonContent = '{"name":"Tom","age":20,"gender":"Male"}';

var obj = JSON.parse(jsonContent);

console.log(obj);

使用JSON.parse()方法将JSON字符串转换为对象。

  1. 解析XML文件

XML（eXtensible Markup Language）是一种可扩展的标记语言，它可以用于存储和传输数据。XML文件结构清晰，易于理解和解析。下面介绍如何使用JS解析XML文件。

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <person>
        <name>Tom</name>
        <age>20</age>
        <gender>Male</gender>
    </person>
    <person>
        <name>Jane</name>
        <age>18</age>
        <gender>Female</gender>
    </person>
</root>

var xmlContent = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n<person>\n<name>Tom</name>\n<age>20</age>\n<gender>Male</gender>\n</person>\n<person>\n<name>Jane</name>\n<age>18</age>\n<gender>Female</gender>\n</person>\n</root>';

var parser = new DOMParser();

var xmlDoc = parser.parseFromString(xmlContent, "text/xml");

var persons = xmlDoc.getElementsByTagName("person");

var result = [];

for (var i = 0; i < persons.length; i++) {
    var name = persons[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var age = parseInt(persons[i].getElementsByTagName("age")[0].childNodes[0].nodeValue);
    var gender = persons[i].getElementsByTagName("gender")[0].childNodes[0].nodeValue;

    var record = {
        name: name,
        age: age,
        gender: gender
    };

    result.push(record);
}

console.log(result);

解析过程：

创建DOMParser对象，用于解析XML文件。 使用parseFromString()方法将XML字符串转换为XML文档对象。 使用getElementsByTagName()方法获取所有person节点。 从每个person节点中获取对应的name、age、gender信息，构造一个符合需求的对象，并将其添加到结果数组中。

avatar
文章
阅读
粉丝