Linkify
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
- Demo
- Installation and Usage
- Browser Support
- Node.js Support
- Downloads
- API Documentation
- Contributing
- License
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
Installation and Usage
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="https://github.com/nfrasser/linkifyjs/blob/main/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