regex - 如何使用 Google S2 Converter 将 markdown() 中的链接转换为与网站图标链接？

Question

我希望 Markdown 链接在转换后的链接中有一个图标。

https://www.google.com/s2/favicons?domain=http://cnn.com- 将从任何域返回图标。

已标记 ( https://github.com/chjj/marked )- 会将我代码中的所有链接都变成 href 的

• http://cnn.com成为
<a href="http://cnn.com">http://cnn.com</a>


那么，我将如何修改 marked.js 以便- http://cnn.com

将成为
<a href="http://cnn.com"><img src="https://www.google.com/s2/favicons?domain=http://cnn.com">http://cnn.com</a>


我确实看到了这一行 452 marked.js
autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
引用: https://github.com/chjj/marked/blob/master/lib/marked.js

我正在使用 expressjs 和 NodeJS

谢谢罗布

Answer 1

您可以 override a renderer method .

Marked 分两步工作:(1) 它将 Markdown 解析为一堆标记，以及 (2) 将这些标记呈现为 HTML。由于您不想更改 Markdown 解析(它已经正确识别链接)，但您确实想要更改 HTML 输出，因此您想要覆盖链接的渲染器。

var renderer = new marked.Renderer();

get_favicon = function (text) {
    // return replacement text here...
    var out = '<img src="https://www.google.com/s2/favicons?domain='
    out += text + '">' + text + '</a>'
    return out
}

renderer.link = function (href, title, text) {
  if (this.options.sanitize) {
    try {
      var prot = decodeURIComponent(unescape(href))
        .replace(/[^\w:]/g, '')
        .toLowerCase();
    } catch (e) {
      return '';
    }
    if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
      return '';
    }
  }
  var out = '<a href="' + href + '"';
  if (title) {
    out += ' title="' + title + '"';
  }
  out += '>' + get_favicon(text) + '</a>';
  return out;
};
}

// Pass the custom renderer to marked with the input.
markdown(input, renderer=renderer)

请注意，我刚刚使用了 default link method并稍微修改它以通过 get_favicon 函数传递 text。 get_favicon 函数接受文本字符串并返回替换文本(在本例中为图像)。它可能会得到改进，因为并非所有链接都只有一个域作为其文本内容。如果文本包含的内容多于域(路径、片段、查询字符串等)，则仅将域用于网站图标链接。或者，如果文本根本不包含链接(因为所有链接都使用相同的渲染器，而不仅仅是自动链接)，那么文本应该原封不动地返回。我会将这些改进作为练习留给读者。