将 H1..6 列表转换为层次结构

Answer 1

我能够在 Typescript 中解决这个问题。

我没有这门语言的经验，虽然它工作得很好，但有更多经验的人可能能够改进这段代码。

我的目标是获取任何 H1..6 列表并将其转换为层次结构，然后过滤到最终层次结构以生成有用的目录。

输出屏幕截图

标题.ts

export default class Heading {
  depth: number;
  sequence: number;
  text: string;
  opts: any;

  parent: Heading | null;
  headings: Heading[] | null;

  constructor(depth: number, sequence: number, text: string, opts: any = {}) {
    this.depth = depth;
    this.sequence = sequence;
    this.text = text;
    this.opts = opts;
    this.parent = null;
    this.headings = null;
  }

  add_heading(heading: Heading) {
    heading.parent = this;
    if (this.headings === null) {
      this.headings = [];
    }
    this.headings.push(heading);
  }

  data() {
    let result: any = {
      depth: this.depth,
      sequence: this.sequence,
      text: this.text,
      ...this.opts,
      headings: this.headings?.map((h) => h.data()),
    };
    return result;
  }
}

运行时使用代码

let filterHeadings = headings
  .filter((heading) => heading.depth === 2 || heading.depth === 3)
  .map((heading, index) => new Heading(heading.depth, index, heading.text, { slug: heading.slug } ));

const toc = new CreateToc(filterHeadings);
toc.process();
let tocHeadings = toc.data();

创建目录

import type Heading from './heading';

export default class CreateToc {
  headings: Heading[];
  hierarchies: Heading[];
  hierarchy_root: Heading | null;
  current_heading: Heading | null;

  constructor(headings: Heading[]) {
    this.headings = headings;
    this.hierarchies = [];
    this.hierarchy_root = null;
    this.current_heading = null;
  }

  process() {
    this.headings.forEach((heading) => {
      this.process_heading(heading);
    });
  }

  data() {
    return this.hierarchies.map((h) => h.data());
  }

  private process_heading(heading: Heading) {
    if (this.hierarchy_root === null) {
      return this.new_hierarchy(heading);
    }
    if (heading.depth > this.current_heading!.depth) {
      return this.add_child_heading(heading);
    }
    if (heading.depth === this.current_heading!.depth) {
      return this.add_sibling_heading(heading);
    }

    // When an up-stream heading is encountered, you have to navigate up to the existing
    // hierarchy or create a new hierarchy out side of the current hierarchy
    if (heading.depth <= this.hierarchy_root.depth) {
      return this.new_hierarchy(heading);
    }
    if (heading.depth < this.current_heading!.depth) {
      return this.add_upstream_heading(heading);
    }
  }

  private new_hierarchy(heading: Heading) {
    this.hierarchies.push(heading);
    this.hierarchy_root = heading;
    this.current_heading = heading;
  }

  private add_child_heading(heading: Heading) {
    this.current_heading!.add_heading(heading);
    this.current_heading = heading;
  }

  private add_sibling_heading(heading: Heading) {
    if (this.current_heading!.parent === null) {
      return;
    }
    this.current_heading = this.current_heading!.parent;
    this.add_child_heading(heading);
  }

  private add_upstream_heading(heading: Heading) {
    while (this.current_heading !== null && heading.depth < this.current_heading.depth) {
      if (this.current_heading.parent === null) {
        throw new Error("current_heading.parent is null");
      }
      this.current_heading = this.current_heading.parent;
    }
    this.add_sibling_heading(heading);
  }
}

Answer 2

这似乎有很多代码可以解决这个问题。

我会将节点列表折叠成一个节点数组，这些节点仍然可以添加子节点，按深度排序。我们从深度为 0 的初始节点开始。最后我们可以简单地提取第一个节点的子节点。

如果我们不介意在您的节点上保留 depth 属性，那么就可以了。如果我们真的不想要它们，那么可以将其包装在一个简单的函数中，该函数递归地删除这些属性。

这是一个版本：

const removeDepth = (xs) => xs .map (
  ({headings = [], depth, ...rest}) => ({...rest, headings: removeDepth(headings)})
)
const makeTree = (xs) => removeDepth (xs .reduce (
  (hs, {depth, text}) => {
    const idx = hs .findLastIndex (x => x .depth < depth)
    const node = {text, headings: [], depth}
    hs [idx] .headings .push (node)
    return [...hs.slice (0, idx + 1), node]
  },
  [{text: null, headings: [], depth: 0}]
) [0] .headings)


const singleRoot = [{depth: 1, text: 'Main heading'}, {depth: 2, text: 'Sub heading 1'}, {depth: 3, text: 'More info'}, {depth: 2, text: 'Sub heading 2'}, {depth: 3, text: 'Even more info'}, {depth: 2, text: 'Sub heading 3 (edge case)'}, {depth: 6, text: 'Deep nesting'}]
const multipleRoot = [{depth: 2, text: 'Why is it done'}, {depth: 3, text: 'Why abc'}, {depth: 3, text: 'Why xyz'}, {depth: 2, text: 'How is it done'}, {depth: 3, text: 'How reason 1'}, {depth: 3, text: 'How reason 2'}, {depth: 4, text: 'More info'}, {depth: 2, text: 'Conclusion'}]
const nonCon = [{depth: 4, text: 'Home -> Blog -> Some Articles'}, {depth: 3, text: 'By Ben Hurr'}, {depth: 4, text: '24th, Sep, 2022'}, {depth: 1, text: 'Some cool Article'}, {depth: 2, text: 'Why abc'}, {depth: 3, text: 'info on why'}, {depth: 3, text: 'more info on why'}, {depth: 2, text: 'How'}, {depth: 3, text: 'How we did it'}, {depth: 2, text: 'Conclusion'}]

console .log ('Single root: ', makeTree (singleRoot))
console .log ('Multiple root: ', makeTree (multipleRoot))
console .log ('Non-conventional headings list: ', makeTree (nonCon))

.as-console-wrapper {max-height: 100% !important; top: 0}

真正的诀窍是维护当前的开放数组列表。我们通过在列表中找到深度低于当前节点的最后一个节点来维护它，将当前节点添加为该节点的子节点，在该点切割列表，并将当前节点添加到其中。当我们从您的示例之一中添加一个又一个节点时，该数组的运行方式如下：

//Initial list: 
[
  {depth: 0, headings: [], text: null}
]

// After breadcrumbs (i.e. "Home -> Blog -> Some Articles"): (4)
[
  {depth: 0, headings: [<breadcrumbs>], text: null}
  {depth: 4, headings: [], text: "Home -> Blog -> Some Articles"}
]

// After "By Ben Hurr": (3):
[
  {depth: 0, headings: [<breadcrumbs>, <By Ben>], text: null}
  {depth: 3, headings: [], text: "By Ben Hurr"}
]


// After "24th Sept" (4):
[
  {depth: 0, headings: [<breadcrumbs>, <By Ben>], text: null}
  {depth: 3, headings: [<24th Sept>], text: "By Ben Hurr"}
  {depth: 4, headings: [], text: "24th, Sep, 2022"}
]


// After "Some Cool Article" (1):
[
  {depth: 0, headings: [<breadcrumbs>, <By Ben>, <Some Cool>], text: null}
  {depth: 1, headings: [], text: 'Some Cool Article'}
]

// After "Why ABC" (2):
[
  {depth: 0, headings: [<breadcrumbs>, <By Ben>, <Some Cool>], text: null}
  {depth: 1, headings: [<Why abc>], text: 'Some Cool Article'}
  {depth: 2, headings: [], text: 'Why abc'}
]

// ...

// Finally

// After "Conclusion" (2):
[
  {depth: 0, headings: [<breadcrumbs>, <By Ben>, <Some Cool>], text: null}
  {depth: 1, headings: [<Why abc>, <How>, <Conclusion>], text: 'Some Cool Article'}
  {depth: 2, headings: [], text: 'Conclusion'}
]

我认为这比您的方法简单得多，但我必须承认没有仔细阅读您的方法；对于一个有趣但并不过分复杂的问题来说，这似乎代码太多了。