Transform URLs In Text Into Links - linkify

File Size: | 102 KB |
---|---|
Views Total: | 7050 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
linkify is a JavaScript library that can be used to automatically transform valid URLs and email addresses in text into clickable links.
Supports node.js, browser, jQuery, Vanilla JavaScript, React.js, @mentions, #hashtag, ticket, and much more.
See also:
Table Of Contents:
Install & Download:
- linkifyjs: Core
- linkify-html: Replace text with links in HTML
- linkify-string: Replace text with links in strings
# Yarn $ yarn add linkifyjs linkify-html linkify-string # NPM $ npm install linkifyjs linkify-html linkify-string --save
How to use it:
1. Import the linkify library.
// Vanilla JavaScript import * as linkify from 'linkifyjs'; import linkifyHtml from 'linkify-html'; import linkifyStr from 'linkify-string'; // OR <script src="linkify.js"></script> <script src="linkify-html.min.js"></script> <script src="linkify-string.js"></script>
// As A jQuery Plugin import $ from 'jquery'; import 'linkify-jquery'; // OR <script src="jquery.js"></script> <script src="linkify.js"></script> <script src="linkify-jquery.js"></script>
2. Replace text with links in strings.
const str = 'Contact us [email protected]'; linkifyStr(str, options); // or str.linkify(options);
3. Replace text with links in HTML.
const str = '<p>Contact us [email protected]</p>'; linkifyHtml(str, options);
4. Find all links in the given string. Possible types:
- 'url'
- 'email'
- 'hashtag'
- 'mention'
- 'ticket'
linkify.find(string, type);
5. Test if the given string is a link.
linkify.test('jqueryscript.net'); // true linkify.test('jqueryscript.net', 'email'); // false
6. Use it as a jQuery plugin.
$(selector).linkify({ // options });
<!-- Find and linkify all entities in this div --> <div data-linkify="this"> ... </div> <!-- Find and linkify the paragraphs and `#footer` element in the body --> <body data-linkify="p" data-linkify-target="_parent"> ... </body>
7. All possible options with default value.
{ // additional attributes for the links attributes: null, // default CSS class className: 'linkified', // default protocol defaultProtocol: 'http', /* event listeners click: function (e) { alert('Link clicked!'); } */ events: null, // format the text format: function (value, type) { return value; }, // format the href formatHref: function (href, type) { return href; }, // ignore specified HTML tags ignoreTags: [], // if true, \n line breaks will automatically be converted to <br> tags. nl2br: false, // the tag that should be used to wrap each URL. This is useful for cases where a tags might be innapropriate, or might syntax problems tagName: 'a', // target attribute for each linkified tag. target: { url: '_blank' }, // custom validation rules here validate: true, // truncate link text truncate: 0, }
8. Transform text into Twitter style #hashtags using the Hashtag
plugin:
# NPM $ npm i linkify-plugin-hashtag
import 'linkify-plugin-hashtag';
<script src="linkify-plugin-hashtag.js"></script>
const options = { formatHref: { hashtag: (href) => 'https://twitter.com/hashtag/' + href.substr(1) } } linkifyHtml('See #jquery')
9. Transform text into Twitter style #mentions using the Mention
plugin:
# NPM $ npm i linkify-plugin-mention
import 'linkify-plugin-mention';
<script src="linkify-plugin-mention.js"></script>
const options = { formatHref: { mention: (href) => 'https://example.com/profiles' + href } } linkifyHtml('See @jqueryscript')
10. Transform text into GitHub-style tickets/issues using the Ticket
plugin:
# NPM $ npm i linkify-plugin-ticket
import 'linkify-plugin-ticket';
<script src="linkify-plugin-ticket.js"></script>
const options = { formatHref: { ticket: (href) => 'https://github.com/Hypercontext/linkifyjs/issues/' + href.substr(1) } } linkifyHtml('This is related to #42.')
Changelog:
v3.0.5 (2022-01-04)
- Fix potential Cross-Site Scripting issue when using linkify-html
v3.0.4 (2021-11-24)
- Expose ES6 modules with "module" field in package.json
v3.0.3 (2021-10-14)
- Add linkifyjs ES6 module build
v3.0.2 (2021-10-11)
- Correctly detect hashtags with underscores
- Fix plugin import bug
- Fix linkify-string and linkify-html type declarations
v3.0.1 (2021-10-10)
- Doc updated
v3.0.0 (2021-09-17)
- Full Internationalized Domain (IDN) and Emoji domain support! Detect URLs, #hashtags and @mentions in any language
- ~10x faster startup; ~4x faster combined startup + first run
- Custom protocols with linkify.registerCustomProtocol('protocol')
- Modernized codebase and build system
- Add new rel option at top level as an alternate way of including it in attributes
- New and improved plugin API
- TypeScript definitions included in published packages
- linkify.find() output includes start and end indexes for where in the string a link was found
v2.1.9 (2021-03-11)
- Move optional dependencies to peerdependencies
- Fix npm install displays vulnerabilities
- Fix typo
v2.1.8 (2019-01-30)
- Allow mentions with inner @ sign for federated mentions
- Drop official support for Internet Explorer 8 and Node.js 6 (still supported unofficially but may break in future releases)
- Update dev dependencies
v2.1.7 (2018-03-06)
- update
v1.1.7 (2014-08-06)
- update
v1.1.6 (2014-05-15)
- update
v1.1.5 (2014-05-14)
- update
v1.1.4 (2014-04-10)
- Added option for detecting ports
v1.1.3 (2014-01-19)
- update to the latest version.
This awesome jQuery plugin is developed by Hypercontext. For more Advanced Usages, please check the demo page or visit the official website.