Skip to content

nfrasser/linkifyjs

Repository files navigation

Linkify

npm version CI BrowserStack Status Coverage Status

Linkify is a JavaScript plugin. Use Linkify to find links in plain-text and convert them to HTML <a> tags. It automatically highlights URLs, #hashtags, @mentions and more.

Note

In November 2024, linkifyjs was transferred from its previous namespace Hypercontext to its primary maintainer @nfrasser, as Hypercontext winds down operations.

Jump to

Features

  • Detect URLs and email addresses
  • #hashtag, @mention and #-ticket plugins
  • React and jQuery support
  • Multi-language and emoji support
  • Custom link plugins
  • Fast, accurate and small footprint (~20kB minified, ~11kB gzipped)
  • 99% test coverage
  • Compatible with all modern browsers (Internet Explorer 11 and up)

Demo

Launch demo

Installation and Usage

View full documentation.

Download the latest release for direct use in the browser, or install via NPM:

npm install linkifyjs linkify-html

Quick Start

When developing in an environment with JavaScript module loader such as Webpack, use an import statement:

import * as linkify from 'linkifyjs';
import linkifyHtml from 'linkify-html';

Or in Node.js with CommonJS modules

const linkify = require('linkifyjs');
const linkifyHtml = require('linkify-html');

Note: When linkify-ing text that does not contain HTML, install and use the linkify-string package instead of linkify-html. Read more about Linkify's interfaces.

Usage

Example 1: Convert all links to <a> tags in the given string

const options = { defaultProtocol: 'https' };
linkifyHtml('Any links to github.com here? If not, contact test@example.com', options);

Returns the following string:

'Any links to <a href="https://github.com">github.com</a> here? If not, contact <a href="mailto:test@example.com">test@example.com</a>';

To modify the resulting links with a target attribute, class name and more, use the available options.

Example 2: Find all links in the given string

linkify.find('Any links to github.com here? If not, contact test@example.com');

Returns the following array

[
  {
    type: 'url',
    value: 'github.com',
    isLink: true,
    href: 'http://github.com',
    start: 13,
    end: 23,
  },
  {
    type: 'email',
    value: 'test@example.com',
    isLink: true,
    href: 'mailto:test@example.com',
    start: 46,
    end: 62,
  },
];

Example 3: Check whether a string is a valid link:

Check if as string is a valid URL or email address:

linkify.test('github.com'); // true

Check if a string is a valid email address:

linkify.test('github.com', 'email'); // false
linkify.test('noreply@github.com', 'email'); // true

Usage with React, jQuery or the browser DOM

Read the interface documentation to learn how to use linkify when working with a specific JavaScript environment such as React.

Plugins for @mentions, #hashtags and more

By default Linkify will only detect and highlight web URLs and e-mail addresses. Plugins for @mentions, #hashtags and more may be installed separately. Read the plugin documentation.

Browser Support

Linkify natively supports all modern browsers.

Node.js Support

Linkify is tested on Node.js 14 and up. Older Node.js versions are unofficially supported.

Downloads

Download the latest release

API Documentation

View full documentation at linkify.js.org/docs

Contributing

Check out CONTRIBUTING.md.

License

MIT

Authors

Linkify is made with ❤️ by @nfrasser