Question

所以我有一个包含超过200行链接和标题的巨大文本文件，有些链接有子项，有些孩子有自己的子项，每个链接/标题都在一个单独的行（\r\n）和每个子集系列由标签（\t）表示。

我的问题是如何通过JavaScript在HTML中复制此文本文件的结构。

以下是文本文件的示例：

Home (#/)
User Accounts (#/user-accounts)
1. Types of user accounts (#/user-accounts/1-types-of-user-accounts)
    1.1 Super administrator (#/user-accounts/1-types-of-user-accounts/1.1-super-administrator)
    1.2 Global administrator (#/user-accounts/1-types-of-user-accounts/1.2-global-administrator)
    1.3 Account administrator (#/user-accounts/1-types-of-user-accounts/1.3-account-administrator)
    ...etc
2. Sign in to an existing user account (#/user-accounts/2-sign-in-to-an-existing-user-account)
3. Sign up for a new account (#/user-accounts/3-sign-up-for-a-new-account)
    3.1. Entering User Details (#/user-accounts/3-sign-up-for-a-new-account/3.1-entering-user-details)
    3.2. Selecting User Type (#/user-accounts/3-sign-up-for-a-new-account/3.2-selecting-user-type)
        3.2.1 Selecting Account (#/user-accounts/3-sign-up-for-a-new-account/3.2.1-selecting-account)
        ...etc

以下是我尝试过的代码：

import data from './raw';

const loadData = () => {
    // Split the string by 'newline'
    const genSplit = data.split(/\r?\n/);
    let temp = [];
    genSplit.forEach((v, i) => {
        let a = (genSplit[i].match(/\t/g) || []).length;
        if (temp[a] == undefined) {
            temp[a] = [];
        }

        temp[a].push(genSplit[i]);
        if (genSplit[i + 1] !== undefined && (genSplit[i + 1].match(/\t/g) || []).length === 0) {
            a++;
        }
    });
    console.log(temp);
    return temp;
};

现在我知道这是在创建一个array，但我想我会首先将文件转换为多维数组，然后迭代它并构建DOM元素。

如果我的思考方式错误或有更好的方法，请告诉我。此外，我无法在网络上找到任何关于我的问题的信息，或者让我相信我的思维方式并不是最实用的。

提前谢谢大家。

Answer 1

（示例代码在es6中，因为根据您的问题，我假设您使用es6）

鉴于您的文本文件包含具有多个级别的项目，多维数组不是一个好选择，因为您不想手动计算要初始化数组的维度总数。多维数组也是浪费资源。

更好的解决方案是创建一个树，其节点表示文本文件中的行。

您可以创建一个类来定义节点：

class Node {
   constructor(id, name, link) {
       this.id = id; // '3.2.1'
       this.name = name; // 'Selecting Account'
       this.link = link; // '#/user-accounts/3-sign-up-for-a-new-account/3.2.1-selecting-account'
   }
}

对于树，您可以挖掘互联网以便以便捷的方式存储树（例如，使用一维数组存储节点，使用二维数组存储父子关系），但是有很多用于树构建的npm包，例如symbol-tree，所以你可能想先看看。

其余的是修改loadData()函数来解析和创建树，以及另一个用于树遍历的函数来构建相应的DOM元素。

基于字符串创建多维数组

1 个答案: