Install with NPM: npm install linkifyjs
v4.1.3 · view release notes · browse code on GitHub
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.
Demo
Enter some links into the "Before" box below. The result will appear in the "After" box in real-time.
Before
After
Linkify works with all kinds of links. Here are some examples:
- URLs with protocols: https://github.com
- URLs without protocols: www.twitter.com
- Emoji domains like 👻💥.ws
- IP Addresses such as 127.0.0.1
- Email addresses (hello@example.com)
- "At"-Mentions like @tc39 or @rust-lang
- Hashtags #PhotoOfTheDay or #일상
Custom link formats are also possible!
Linkify is made with ❤️ by @Hypercontext and @nfrasser
Source code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const beforeEl = document.getElementById('linkify-demo-before') | |
const afterEl = document.getElementById('linkify-demo-after') | |
const options = { | |
rel: 'nofollow noreferrer noopener', | |
formatHref: { | |
hashtag: (val) => `https://www.twitter.com/hashtag/${val.substr(1)}`, | |
mention: (val) => `https://github.com/${val.substr(1)}` | |
} | |
} | |
afterEl.innerHTML = linkifyStr(beforeEl.value, options) | |
beforeEl.addEventListener('input', () => { | |
afterEl.innerHTML = linkifyStr(beforeEl.value, options) | |
}) |
Features
- Detect URLs and email addresses
- #hashtag, @mention, IP address plugins
- React and jQuery support
- Multi-language and emoji support
- Custom link plugins
- Fast, accurate and small footprint (~11kB gzipped)
- 95%+ test coverage
- Compatible with all modern browsers
Learn how to use Linkify in your project
What is Hypercontext?
Linkify is maintained by @nfrasser and @Hypercontext. Hypercontext helps managers have better 1:1s and team meetings.
Build agendas, manage meetings, set goals, and get feedback—all in one place. Learn more at hypercontext.com