Transform URLs In Text Into Links - linkify
File Size: | 134 KB |
---|---|
Views Total: | 9783 |
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, emails, IP addresses, and even words in text into clickable links.
Supports node.js, browser, jQuery, Vanilla JavaScript, React.js, @mentions, #hashtag, ticket, and much more.
See also:
- jQuery Plugin For Transforming URL To Link - urlToLink
- Convert Plain Text URL Into Hyperlink - jQuery Feedify
Table Of Contents:
Install & Download:
- linkifyjs: Core
- linkify-html: Replace text with links in HTML
- linkify-element: Replace links within native DOM elements with anchor tags
# Yarn $ yarn add linkifyjs linkify-html linkify-element # NPM $ npm install linkifyjs linkify-html linkify-element --save
How to use it:
1. Import the linkify library.
// Vanilla JavaScript import * as linkify from 'linkifyjs'; import linkifyHtml from 'linkify-html'; import linkifyElement from 'linkify-element'; // OR <script src="linkify.js"></script> <script src="linkify-html.min.js"></script> <script src="linkify-element.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 all links withint DOM elements with anchor links.
linkifyElement(document.getElementById("id"), options, document);
3. Replace text with links in HTML.
linkifyHtml( "Contact us [email protected]", { // options here } );
4. Find all links in the given string. Possible types:
- 'url'
- 'email'
- 'hashtag'
- 'mention'
- 'ticket'
linkify.find(string, type, options);
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. Register a custom protocol.
// linkify.registerCustomProtocol (scheme [, optionalSlashSlash = false]) linkify.registerCustomProtocol("fb"); linkify.registerCustomProtocol("instagram", true);
8. 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, // rel attribute rel: null, // Accepts a function that takes the unformatted href, the link type (e.g., 'url', 'email', etc.) and returns the rel string. // Accepts an object where each key is the link type and each value is the rel string to use for that type. render: null, // 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, }
9. 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')
10. 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')
11. 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.')
12. Replace IP addresses with links:
# NPM $ npm i linkify-plugin-ip
import 'linkify-plugin-ip';
<script src="linkify-plugin-ip.js"></script>
linkifyHtml("No place like 127.0.0.1");
13. Replace any words with links:
# NPM $ npm i linkify-plugin-keyword
import 'linkify-plugin-keyword';
<script src="linkify-plugin-keyword.js"></script>
linkifyRegisterKeywords(["100%", "linkify", "okrs", "roi", "synergy"]); const options = { formatHref: { keyword: (keyword) => "/tags/" + keyword.toLowerCase(), }, }; linkifyHtml( "Use Linkify to complete your OKRs, increase ROI by 100% and create *synergy*", options );
Changelog:
v4.1.3 (2023-11-22)
- Add support for fullwidth parentheses
- linkify-html: don't convert & -> &
- Bracket parsing refactor and support for 「」『』<> brackets
v4.1.2 (2023-11-13)
- Ensure linkify.find() respects validate option
v4.1.1 (2023-03-26)
- Improved parsing of URLs with symbols
- Ensure function options get called with unformatted href
- Upgrade dependencies
v4.1.0 (2023-01-04)
- Drop support for Safari 10
- Reduce core bundle file size by ~30%
- Restore support for email address with scheme local part
- Allow hashtags with emojis
v4.0.2 (2022-10-03)
- Fix email address detection with domains containing numbers
v4.0.1 (2022-09-29)
- Restore nl2br option for linkify-html
- Fixed duplicate key warning in linkify-react with multiple children
v4.0.0 (2022-09-19)
- Removed deprecated linkifyjs/string, linkifyjs/html, linkifyjs/plugins/*
- packages. Use linkify-string, linkify-html and linkify-plugin-* instead.
- Refactored scanner internals break custom link plugins created with Linkify v3
- Links that begin with mailto: now have type url instead of email
- Drop official IE 11 support
- Added linkify-plugin-ip plugin for detecting IPv4 and IPv6 addresses
- Added linkify-plugin-keyword plugin for detecting arbitrary keywords
- Added linkify.find() function accepts an options argument for output formatting
- Added New render option to override link rendering
- Added Second optionalSlashSlash argument for registerCustomProtocol to allow links that don't require // after scheme:
- Added Link token methods toFormattedString(options), toFormattedHref(options) and toFormattedObject(options) that accept a linkify.Options object
- Added More granular scanner tokens for improved plugin flexibility
- Added linkify-react: New as property (alias for tagName)
- Improved link detection with mixed languages
- Fixed Consistent option availability across interfaces (including truncate)
- Fixed linkify-html: Improved HTML entity parsing
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.