javascript - 使用 JavaScript 将纯文本列表转换为 HTML 列表

Question

我经常收到 PDF 格式的分层文本列表(通常为三层)。我想将它们放入 HTML 列表中，以便可以使用 CSS 设计它们的样式并使其更美观。由于数据量很大，我正在尝试使用 JavaScript 自动化该过程。

示例源数据:

・First Level 1 list item
– First Level 2 list item, which is a subset of the first Level 1 list item.
– Second Level 2 list item, which is a subset of the first Level 1 list item.
♦ First Level 3 list item, which is a subset of the second Level 2 list item.
・Second Level 1 list item.

目标示例:

<ul>
    <li>First Level 1 list item</li>
        <ul>
            <li>First Level 2 list item, which is a subset of the first Level 1 list item.</li>
            <li>Second Level 2 list item, which is a subset of the first Level 1 list item.
                <ul>
                    <li>First Level 3 list item, which is a subset of the second Level 2 list item.</li>
                </ul>
            </li>
        </ul>
    <li>Second Level 1 list item.</li>
</ul>

到目前为止的进展:

我确定可以使用以下正则表达式匹配 1 级列表项:/^・.+$/gm

并使用以下正则表达式匹配 2 级列表项:/^\–.+$/gm

第 3 级:/^♦.+$/gm

或者简单地通过组合以下方式一次性分隔所有列表级别:string.match(/(^・.+$)|(^\–.+$)|( ^.+$)/gm);

现在知道如何匹配不同类型的项目，我正在尝试找出如何对它们进行排序。从概念上讲，如果我将它们全部放在一个数组中(让我们在下一个示例中使用简单的颜色编码)，那么应该可以创建一个可以识别模式并在其中创建一个多维数组的函数正确的层次结构，然后使用另一个函数来输出在适当位置填充了 HTML 标签的内容。

基于类型的一维数组到多维数组转换的可视化:

假设在上面的简化示例中，我们只有一个由三个字母组成的字符串，对应于颜色 - r、g、b .

所以可能看起来像:rrgbrgbrgbbrggbr

我一直在尝试并尝试将这种结构放入多维数组中。

我相信需要 3 级以下的一个维度来保存实际的文本字符串。并且需要 1 级以上的维度来包含每个整个列表。所以结构如下:

list
[
    level1
    [
        level2
        [
            level3
            [   
                string
                ["list item text"]
            ]
        ]
    ]
]

我在弄清楚如何对所有这些进行排序时遇到了一些麻烦。任何帮助表示赞赏。

Answer 1

不需要正则表达式。

var log = console.log;
var data = `・First Level 1 list item
– First Level 2 list item, which is a subset of the first Level 1 list item.
– Second Level 2 list item, which is a subset of the first Level 1 list item.
♦ First Level 3 list item, which is a subset of the second Level 2 list item.
・Second Level 1 list item.`;
//split text to array of string. One item per line
data = data.split("\n");
var firstChar,prevFirstChar = "";
//our output struct
var struct = [];
var cursor = struct;
//we need only one token for return to first level
var lvl1Key = "・";
var prevnode = {};

data.forEach(line=>{
    //get token
    firstChar = line.charAt(0);
    let node = {
        str : line.slice(1),
        child : []
    };
    if (firstChar == lvl1Key) {
      //return to root
      cursor = struct;
    } else if (firstChar != prevFirstChar) {
      //move up if token change and it is not root token
      cursor = prevnode.child;
    }
    cursor.push(node);
    prevnode = node;
    prevFirstChar = firstChar;
});
log(struct);
//Ok, we get struct, convert this to html
//offset for formating
const offsetSize = 2;
//recursive function node - array of { str : "string", childs : [nodes]}
var toHtml = function(node, offset = "") {
    var ret = offset + "<ul>\n";
    offset += " ".repeat(offsetSize);
    node.forEach(rec=>{
        ret += offset + "<li>" + rec.str + "</li>\n";
        //if array not empty add html for childs
        if (rec.child.length) {
            ret += toHtml(rec.child, offset + " ".repeat(offsetSize));
        }
    });
    offset = offset.slice(offsetSize);
    ret += offset + "</ul>\n";
    return ret;
}
log(toHtml(struct));