jQuery Plugins › jQuery Text Plugins › linkify

Transform URLs In Text Into Links - linkify

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