如何在JavaScript代码中提取函数的JSDoc文档字符串？

完全可以实现这个需求，下面提供两种实用的实现方式：

一、原生正则匹配处理 #

如果你的JSDoc格式比较规整，用原生JavaScript正则就能快速完成提取和处理：

1. 获取目标JS代码的文本内容
2. 用正则匹配出JSDoc注释块
3. 清理注释块中的多余符号（如每行开头的*、首尾的注释标记）
4. 将处理后的内容插入到页面元素中

示例代码：

// 示例JS代码文本
const jsCode = `/**
 * Represents a book.
 * @constructor
 */
function Book(title, author) {
  // contents
}`;

// 匹配JSDoc注释的正则
const jsdocRegex = /\/\*\*([\s\S]*?)\*\//;
const matchResult = jsCode.match(jsdocRegex);

if (matchResult) {
  let jsdocContent = matchResult[1];
  // 移除每行开头的*及多余空格，清理首尾空白
  jsdocContent = jsdocContent.replace(/^\s*\*\s?/gm, '').trim();
  // 创建span元素并插入内容
  const displaySpan = document.createElement('span');
  displaySpan.textContent = jsdocContent;
  // 将元素添加到页面中（这里以body为例）
  document.body.appendChild(displaySpan);
}

二、用专业库解析复杂JSDoc #

如果需要处理包含更多标签、嵌套结构或复杂格式的JSDoc，推荐使用专门的解析库，比如doctrine：

1. 先安装依赖：npm install doctrine
2. 提取JSDoc注释块
3. 用库解析注释内容，按需提取描述和标签
4. 将整理后的内容插入页面

示例代码：

const doctrine = require('doctrine');

// 提取到的JSDoc注释文本
const jsdocComment = `/**
 * Represents a book.
 * @constructor
 */`;

// 解析JSDoc，unwrap选项用于移除外层注释标记
const parsedDoc = doctrine.parse(jsdocComment, { unwrap: true });
// 整理要展示的内容：描述+标签
const displayContent = `${parsedDoc.description}\n${parsedDoc.tags.map(tag => `@${tag.title}`).join('\n')}`;

// 插入到页面
const displaySpan = document.createElement('span');
displaySpan.textContent = displayContent;
document.body.appendChild(displaySpan);

两种方式都能实现你想要的效果，根据自己的JSDoc复杂度选择即可。

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