Jump To
- Quick Start
- Usage
- Usage with React, jQuery or the browser DOM
- Plugins for @mentions, #hashtags and more
- Browser Support
Installation and Getting Started
Download the latest release or install via NPM
npm install linkifyjs linkify-html
Quick Start
Option 1: Import with a module loader
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");
Option 2: Download and import for direct use in the browser
If using JavaScript directly in the browser, download the latest release
and add linkify
and linkify-html
scripts to your HTML:
<script src="linkify.min.js"></script>
<script src="linkify-html.min.js"></script>
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.
Option 3: Import from a CDN
Include Linkify in your HTML from any NPM-compatible CDN such as
jsDelivr. The latest
browser scripts are located in the dist
subdirectory. This applies
to linkifyjs
and all related modules such as linkify-react
or
linkify-plugin-hashtag
<script src="https://cdn.jsdelivr.net/npm/linkifyjs@4.1.4/dist/linkify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/linkify-html@4.1.4/dist/linkify-html.min.js"></script>
This also creates global variables linkify
and linkifyHtml
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. Linkify is tested on Internet Explorer 11 and above.