jQuery Plugins › jQuery Text Plugins › linkify

Transform URLs In Text Into Links - linkify

Transform URLs In Text Into Links - linkify
File Size: 169 KB
Views Total: 7798
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2022

Chrome, IE9+, FireFox, Opera, Safari#URL

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:

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.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.