如何用JavaScript将Markdown链接转换为HTML可点击链接？

我的HTML网页会导入外部Markdown文本，但其中[text](url)格式的链接只会显示成纯字符串，没法变成可点击的<a href="url">text</a>。我需要一段JavaScript脚本，在外部文本导入完成后自动把这些Markdown链接转成HTML超链接，目标是处理类名为pk的元素里的内容。

我是JS新手，自己改了一段代码但没法用，代码如下：

var prNs = document.getElementsByClassName('pk');
let elements = prNs.match(/\[.*?\)/g);
if( elements != null && elements.length > 0){
  for(el of elements){
    let txt = el.match(/\[(.*?)\]/)[1];//get only the txt
    let url = el.match(/\((.*?)\)/)[1];//get only the link
    prNs = prNs.replace(el,'<a href="'+url+'" target="_blank">'+txt+'</a>')
  }
}

修正后的可用代码 #

// 等待页面加载完成，确保外部文本已经导入
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有类名为pk的元素
  const pkElements = document.getElementsByClassName('pk');
  
  // 遍历每个pk元素
  for (const element of pkElements) {
    // 获取元素内的原始文本
    let content = element.textContent;
    
    // 正则表达式匹配Markdown链接格式 [text](url)
    const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
    
    // 替换所有匹配到的链接为HTML<a>标签
    content = content.replace(markdownLinkRegex, '<a href="$2" target="_blank">$1</a>');
    
    // 将替换后的内容放回元素，解析HTML标签
    element.innerHTML = content;
  }
});

（注意：上面的$1对应链接显示文本，$2对应URL，别搞反了）

代码原理&原始问题解析 #

原始代码的问题 #

1. 对象类型错误：getElementsByClassName返回的是元素集合（不是字符串），不能直接调用match和replace方法，这是最关键的错误。
2. 时机不对：没等外部文本加载完成就执行脚本，可能元素还没被填充内容，自然找不到要替换的链接。
3. 正则不完整：\[.*?\)没正确匹配完整的(url)部分，也没加全局匹配标记g，只能匹配第一个链接（甚至匹配不全）。
4. 操作对象错误：直接修改prNs（元素集合）毫无意义，应该逐个处理每个元素的文本内容。

修正后代码的逻辑 #

• 等待加载完成：用DOMContentLoaded事件确保页面所有内容（包括导入的外部文本）都加载好了再执行脚本。
• 遍历目标元素：逐个处理每个类名为pk的元素，确保所有符合条件的内容都被处理。
• 精准匹配链接：正则/\[([^\]]+)\]\(([^)]+)\)/g专门匹配[显示文本](链接地址)格式：
  • \[([^\]]+)\]：捕获方括号里的显示文本（[^\]]+表示除了]之外的所有字符）
  • \(([^)]+)\)：捕获括号里的URL（[^)]+表示除了)之外的所有字符）
  • g标记表示全局匹配，一次性替换元素内所有符合格式的链接
• 生成可点击链接：用replace方法把匹配到的内容替换成<a>标签，$1对应捕获的显示文本，$2对应URL，最后用innerHTML把解析后的HTML放回元素，让浏览器渲染成可点击的链接。

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