基于Next.js的Markdown博客：如何提取p标签内容生成文章预览？

不推荐用正则表达式处理HTML，因为HTML结构可能存在嵌套、属性、换行等情况，正则很容易出现匹配错误，维护性也差。下面提供几种更可靠的实现方式：

1. 在Markdown AST阶段直接提取（推荐） #

既然你已经在用unified处理Markdown，完全可以跳过转HTML的步骤，直接在Markdown抽象语法树（AST）阶段提取段落文本，这样更高效也更准确：

import { unified } from 'unified';
import remarkParse from 'remark-parse';

async function getArticlePreview(markdownContent) {
  let previewText = '';

  await unified()
    .use(remarkParse)
    .use(() => (tree) => {
      // 遍历AST节点，收集所有段落的文本内容
      const traverse = (node) => {
        if (node.type === 'paragraph') {
          node.children.forEach(child => {
            if (child.type === 'text') {
              previewText += `${child.value} `;
            }
          });
        }
        // 递归处理子节点
        if (node.children) {
          node.children.forEach(traverse);
        }
      };
      traverse(tree);
    })
    .process(markdownContent);

  return previewText.trim();
}

2. 用DOM解析库处理已生成的HTML #

如果已经有转换好的HTML字符串，推荐用专门的DOM解析库来提取内容，比如轻量的cheerio，或者Node.js环境的jsdom：

用cheerio实现 #

import cheerio from 'cheerio';

function extractPreviewFromHTML(html) {
  const $ = cheerio.load(html);
  // 提取所有p标签的文本，合并并去除多余空格
  return $('p').text().replace(/\s+/g, ' ').trim();
}

用jsdom实现 #

import { JSDOM } from 'jsdom';

function extractPreviewFromHTML(html) {
  const dom = new JSDOM(html);
  const pElements = dom.window.document.querySelectorAll('p');
  return Array.from(pElements)
    .map(p => p.textContent)
    .join(' ')
    .replace(/\s+/g, ' ')
    .trim();
}

总结 #

• 优先选择AST阶段提取的方式，不需要额外转换HTML，流程更简洁高效；
• 如果必须处理HTML，用cheerio或jsdom这类库，比正则表达式更稳定可靠；
• 绝对避免用正则处理HTML，后续维护和容错成本极高。

内容的提问来源于stack exchange，提问作者nyamDal