【Nodejs相关】md如何处理a的target

【Nodejs相关】md如何处理a的target

有没有和我一样，曾经会问：

a设置的时候如何配置target，来处理外链？ （在国内的网站很多还是有这种BT的需求的）

6 回复

【Nodejs相关】md如何处理a的target

在使用Markdown时，你可能会遇到需要在生成的HTML中为<a>标签添加target="_blank"属性的情况，以便在点击链接时在新标签页中打开外部链接。默认情况下，Markdown解析器（如marked或markdown-it）不会自动添加这些属性。

示例问题

假设你有一个Markdown文件，内容如下：

[访问百度](https://www.baidu.com)

当你使用Markdown解析器将其转换为HTML时，默认输出可能如下：

<a href="https://www.baidu.com">访问百度</a>

但你希望生成的HTML能包含target="_blank"属性：

<a href="https://www.baidu.com" target="_blank">访问百度</a>

解决方案

你可以通过自定义渲染规则来实现这一点。这里以markdown-it为例进行说明。

  1. 安装 markdown-it

    如果你还没有安装markdown-it，可以通过npm安装：

    npm install markdown-it

  2. 创建一个自定义的渲染函数

    你可以创建一个函数来修改<a>标签的属性。以下是一个简单的例子：

    const MarkdownIt = require('markdown-it');

// 初始化markdown-it实例
const md = new MarkdownIt();

// 自定义渲染规则
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
  tokens[idx].attrPush(['target', '_blank']);
  return self.renderToken(tokens, idx, options);
};

// 示例Markdown文本
const markdownText = '[访问百度](https://www.baidu.com)';

// 渲染Markdown为HTML
const html = md.render(markdownText);

console.log(html);

  3. 运行脚本

    当你运行上述脚本时，它将输出带有target="_blank"属性的HTML：

    <p><a href="https://www.baidu.com" target="_blank">访问百度</a></p>

总结

通过自定义markdown-it的渲染规则，你可以轻松地为<a>标签添加target="_blank"属性，从而在点击链接时在新标签页中打开外部链接。这种方法不仅适用于markdown-it，也可以根据其他Markdown解析库的API进行相应的调整。


<a href=“qq.com” target="_blank">测试一下嵌入 HTML…</a>

<a href="http://www.baidu.com" target="_blank">百度a标签生成</a>

你这个也是和我下面那个用html标签生成的吧？

是嘀… 不过我漏写了 http:// 链接被识别成站内了

在 Node.js 中处理 Markdown 文件时，如果你想为 <a> 标签添加 target 属性，可以通过自定义 Markdown 解析器或使用插件来实现。这里有一个简单的示例，展示如何使用 marked 和 marked-terminal 插件来实现这一需求。

示例代码

首先，你需要安装 marked 和 marked-terminal 插件：

npm install marked marked-terminal

然后，你可以创建一个简单的 Node.js 脚本来处理 Markdown 文件，并为外部链接添加 target="_blank" 属性：

const marked = require('marked');
const terminalRenderer = require('marked-terminal');

// 自定义 Renderer 类
class CustomRenderer extends terminalRenderer {
    // 重写 link 方法
    link(href, title, text) {
        const isExternalLink = /^https?:\/\//.test(href);
        const target = isExternalLink ? 'target="_blank"' : '';
        return `<a href="${href}" ${target}>${text}</a>`;
    }
}

const renderer = new CustomRenderer();
marked.setOptions({
    renderer: renderer,
});

const markdownText = `
# 示例标题

这是一个[内部链接](/internal)。

这是一个[外部链接](https://example.com)。
`;

console.log(marked(markdownText));

解释

  1. 安装依赖：我们安装了 marked（Markdown 解析器）和 marked-terminal（一个终端友好的渲染器）。
  2. 自定义 Renderer：我们继承了 terminalRenderer 类，并重写了 link 方法。在这个方法中，我们判断链接是否是外部链接，如果是，则添加 target="_blank" 属性。
  3. 解析 Markdown：我们使用 marked 来解析 Markdown 文本，并应用自定义的 Renderer。

运行这段代码后，你会看到输出的 HTML 中，外部链接会被正确地添加了 target="_blank" 属性。这可以确保用户点击外部链接时会在新标签页中打开。

这样就可以实现你的需求，使得 Markdown 中的外部链接能够以新标签页的方式打开。

回到顶部