Press "Enter" to skip to content

JavaScript Plugin For Finding Links In Plain Text and Converting to HTML Tags | Linkify

Linkify is a small, comprehensive JavaScript plugin for finding URLs in plain text and converting them to HTML links. Works with all valid URLs and email addresses.

Linkify is a JS library that can be used to automatically convert valid URLs and email addresses in text into clickable links.

Supports node.js, Browser, jQuery, Vanilla JavaScript, React.js, Mentions, Hashtags, Ticket, and much more.

How to make use of it:

Install & Download:

# Yarn
$ yarn add linkifyjs

# NPM
$ npm install linkifyjs --save

1. Include the jQuery library and the jQuery linkify plugin within the web page.

<script src="jquery.min.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>

2. To use plugins, embody the plugin’s JavaScript within the doc.

<script src="linkify-plugin-hashtag.amd.min.js"></script>
<script src="linkify-plugin-mention.amd.js"></script>
<script src="linkify-plugin-ticket.amd.js"></script>

3. Include a polyfill for legacy browsers.

<script src="linkify-polyfill.min.js"></script>

4. A Linkified object incorporates a DOM node whose inside text is changed by HTML containing <a> links to URLs found in that text.

<p>My website name</p>
<p>My email address here</p>

5. Call the plugin and accomplished it.

$(function(){
  $('p').linkify();
});

6. All default plugin settings.

$('p').linkify({

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

});

7. Find all links within the given string.

linkify.find('any string here');

jQuery Plugin To Transform URLs In-Text Into Links, Linkify Github


See Demo And Download

Official Website(Soapbox): Click Here

This superior jQuery/javascript plugin is developed by Soapbox. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.