Автоматические ссылки

Marked — это высокопроизводительная библиотека для парсинга Markdown в JavaScript, которая поддерживает различные расширения стандартного синтаксиса, включая автоматическое создание ссылок. Функция автоматических ссылок позволяет преобразовывать URL и email-адреса, встречающиеся в тексте, в кликабельные HTML-ссылки без явного использования синтаксиса [текст](URL).

Основные возможности

1. Автоопределение URL Marked умеет распознавать обычные веб-адреса, такие как:

https://example.com
http://my-site.org

И автоматически преобразовывать их в HTML:

<a href="https://example.com">https://example.com</a>
<a href="http://my-site.org">http://my-site.org</a>

Особенности:

  • Поддерживаются протоколы http, https, ftp.
  • URL с различными символами (например, ?, #, &) корректно обрабатываются.
  • Не требуется заключение URL в угловые скобки < >, хотя они тоже допустимы.

2. Автоматическое распознавание email-адресов

Email-адреса вида user@example.com могут быть автоматически преобразованы в ссылку с mailto::

user@example.com

HTML-результат:

<a href="mailto:user@example.com">user@example.com</a>

Важные моменты:

  • Библиотека корректно обрабатывает поддомены и сложные доменные зоны.
  • Для предотвращения спама можно использовать sanitize-функции или маскирование.

Настройка парсера

Marked предоставляет опции для включения или отключения автоматических ссылок.

const marked = require('marked');

marked.setOptions({
  mangle: true, // замена email на сущности для защиты от спама
  headerIds: true,
  xhtml: false,
  breaks: false,
  gfm: true,
  linkify: true // включает автоматические ссылки
});
  • linkify — ключевая опция, которая отвечает за распознавание URL и email. Без неё авто-ссылки не работают.
  • mangle — преобразует email в сущности, чтобы усложнить их сбор ботами.

Примеры использования

Пример 1: Текст с URL и email

const markdown = `
Посетите наш сайт https://example.com для дополнительной информации.
Для связи пишите на email: contact@example.com.
`;

const html = marked.parse(markdown, { linkify: true });
console.log(html);

Результат:

<p>Посетите наш сайт <a href="https://example.com">https://example.com</a> для дополнительной информации.
Для связи пишите на email: <a href="mailto:contact@example.com">contact@example.com</a>.</p>

Пример 2: Смешанный текст с Markdown-разметкой

const markdown = `
* Сайт компании: https://company.com
* Email отдела поддержки: support@company.com
`;

const html = marked.parse(markdown, { linkify: true });

HTML:

<ul>
<li>Сайт компании: <a href="https://company.com">https://company.com</a></li>
<li>Email отдела поддержки: <a href="mailto:support@company.com">support@company.com</a></li>
</ul>

Дополнительные тонкости

  • Обработка скобок и знаков препинания: Marked корректно определяет URL даже при наличии точек, запятых или скобок в конце. Например, https://example.com/page.html) не включит закрывающую скобку в ссылку.
  • Безопасность: при генерации HTML важно использовать sanitize или DOMPurify, чтобы избежать внедрения небезопасного контента.
  • Расширяемость: можно создавать собственные токены для распознавания нестандартных URL-схем или внутренних ссылок, интегрируя их в цепочку лексера Marked.

Интеграция с редакторами

В приложениях для редактирования Markdown автоматические ссылки полезны для:

  • Live-превью: пользователи сразу видят кликабельные URL без лишнего синтаксиса.
  • Улучшенной навигации: можно автоматически добавлять атрибуты target="_blank" или rel="noopener noreferrer".
  • Фильтрации спама: через mangle и кастомные фильтры для email.
marked.use({
  renderer: {
    link(href, title, text) {
      return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
    }
  }
});

Автоматические ссылки в Marked обеспечивают удобство и ускоряют преобразование Markdown в HTML, минимизируя ручное оформление ссылок и повышая читаемость контента. Они полностью совместимы с основными возможностями библиотеки: списками, заголовками, цитатами и таблицами, позволяя создавать комплексный, структурированный HTML-документ.

Оглавление