jQuery Plugins › jQuery Text Plugins › linkify

Transform URLs In Text Into Links - linkify

File Size:	134 KB
Views Total:	8555
Last Update:	03/26/2023 12:01:00 UTC
Publish Date:	12/26/2013 13:17:09 UTC
Official Website:	Go to website
License:	MIT

Demo Download

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

Transform URLs In Text Into Links - linkify

See also:

Table Of Contents:

Install & Download:

How to use it:

Changelog:

Transform URLs In Text Into Links - linkify

See also:

Table Of Contents:

Install & Download:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review