正则表达式 - 从 markdown 字符串中提取所有标题

Question

我使用灰质将文件系统中的 .MD 文件解析为字符串。解析器产生的结果是这样的字符串：

\n# Clean-er ReactJS Code - Conditional Rendering\n\n## TL;DR\n\nMove render conditions into appropriately named variables. Abstract the condition logic into a function. This makes the render function code a lot easier to understand, refactor, reuse, test, and think about.\n\n## Introduction\n\nConditional rendering is when a logical operator determines what will be rendered. The following code is from the examples in the official ReactJS documentation. It is one of the simplest examples of conditional rendering that I can think of.\n\n

我现在正在尝试编写一个正则表达式，该表达式将从字符串中提取所有标题文本。Markdown 中的标题以 # 开头（可以是 1-6），在我的例子中总是以新行结束。

我尝试使用以下正则表达式，但在我的测试字符串上调用它不会返回任何结果：

\n# Clean-er ReactJS Code - Conditional Rendering\n\n## TL;DR\n\nMove render conditions into appropriately named variables. Abstract the condition logic into a function. This makes the render function code a lot easier to understand, refactor, reuse, test, and think about.\n\n## Introduction\n\nConditional rendering is when a logical operator determines what will be rendered. The following code is from the examples in the official ReactJS documentation. It is one of the simplest examples of conditional rendering that I can think of.\n\n

该控制台记录headings为null（未找到匹配项）。我正在寻找的结果是：["# Clean-er ReactJS Code - Conditional Rendering", "## TL;DR", "## Introduction"]。

我认为正则表达式是错误的，但不知道为什么。

Answer 1

/#{1,6}.+(?=\n)/g

• #{1,6}... 匹配该字符#至少一次或作为最多 6 个相等字符的序列。

• .+匹配任何字符（行终止符除外）至少一次并尽可能多次（贪婪）

• 这样做直到正向前瞻 (?=\n)匹配......

  • 这是……\n换行/换行。

• 使用global 修饰符来匹配所有内容。

编辑

话虽如此

“匹配任何字符（行终止符除外）”

因此，像 ... ... 这样的正则表达式/#{1,6}.+/g应该已经完成​​了 OP 用例的工作（不需要积极的前瞻），即 ...

“markdown 中的标题以 # 开头（可以是 1-6），就我而言，总是以新行结束。 ”

我正在寻找的结果是：["# Clean-er ReactJS Code - Conditional Rendering", "## TL;DR", "## Introduction"]。

const testString = `\n# Clean-er ReactJS Code - Conditional Rendering\n\n## TL;DR\n\nMove render conditions into appropriately named variables. Abstract the condition logic into a function. This makes the render function code a lot easier to understand, refactor, reuse, test, and think about.\n\n## Introduction\n\nConditional rendering is when a logical operator determines what will be rendered. The following code is from the examples in the official ReactJS documentation. It is one of the simplest examples of conditional rendering that I can think of.\n\n`;

// see...[https://regex101.com/r/n6XQub/2]
const regXHeader = /#{1,6}.+/g

console.log(
  testString.match(regXHeader)
);

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

奖金

将上述正则表达式重构为例如/(?<flag>#{1,6})\s+(?<content>.+)/g通过利用命名捕获组以及pingmatchAll任务map，可以实现类似于由下一个提供的示例代码计算的结果...

const testString = `\n# Clean-er ReactJS Code - Conditional Rendering\n\n## TL;DR\n\nMove render conditions into appropriately named variables. Abstract the condition logic into a function. This makes the render function code a lot easier to understand, refactor, reuse, test, and think about.\n\n## Introduction\n\nConditional rendering is when a logical operator determines what will be rendered. The following code is from the examples in the official ReactJS documentation. It is one of the simplest examples of conditional rendering that I can think of.\n\n`;

// see...[https://regex101.com/r/n6XQub/4]
const regXHeader = /(?<flag>#{1,6})\s+(?<content>.+)/g

console.log(
  Array
    .from(
      testString.matchAll(regXHeader)
    )
    .map(({ groups: { flag, content } }) => ({
      heading: `h${ flag.length }`,
      content,
    }))
);

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