Skip to content

Linkify is a jQuery plugin for finding URLs in plain-text and converting them to HTML links

License

Notifications You must be signed in to change notification settings

infowrap/jQuery-linkify

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Linkify

Node Dependencies

Download 1.1

Jump to

Linkify is a jQuery plugin for finding URLs in plain-text and converting them to HTML links. It works with all valid URLs and email addresses.

Demo

Launch demo

Installing

Basic

Just download jquery.linkify.min.js from this repo's dist folder and include it on your web page with <script> tag, along with jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.linkify.min.js"></script>

Bower

Run bower install jQuery-linkify from your project's root folder.

Examples

Basic Usage

To detect links within any set of elements, just call $(selector).linkify() on document load.

Code

<p id="paragraph1">Check out this link to http://google.com</p>
<p id="paragraph2">You can also email [email protected] to view more.</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.linkify.min.js"></script>
$(window).on('load', function () {
  $('p').linkify();
});

Output

<p id="paragraph1">
  Check out this link to
  <a href="http://google.com" class="linkified" target="_blank">
    http://google.com
  </a>
</p>
<p id="paragraph2">
  You can also email
  <a href="mailto:[email protected]" class="linkified">
    [email protected]
  </a>
  to view more.
</p>

Usage via HTML attributes

Linkify also provides a DOM data- API. The following code will find links in the #linkify-example paragraph element:

<p id="linkify-example" data-linkify="this">
  Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua.
</p>

Pass in a selector instead of this to linkify every element with that selector. The example below linkifies every paragraph and .plain-text element in the bodytag:

<body data-linkify="p, .plain-text">
  ...
</body>

Options

Linkify is applied with the following default options. Below is a description of each.

$('selector').linkify({
  tagName: 'a',
  target: '_blank',
  newLine: '\n',
  linkClass: null,
  linkAttributes: null
});
	<tr>
		<td>linkClass</td>
		<td>String</td>
		<td><code>null</code></td>
		<td>
			The class to be added to each linkified tag. An extra <code>.linkified</code> class ensures that each link will be clickable, regardless of the value of <code>tagName</code>. Linkify won't attempt finding links in <code>.linkified</code> elements.
		</td>
		<td><code class="small">data-linkify-linkclass</code></td>
	</tr>

	<tr>
		<td>linkAttributes</td>
		<td>Object</td>
		<td><code>null</code></td>
		<td>
			HTML attributes to add to each linkified tag. In the
			following example, the <code>tabindex</code> and
			<code>rel</code> attributes will be added to each link.
$('p').linkify({
	linkAttributes: {
		tabindex: 0,
		rel: 'nofollow'
	}
});
		</td>
		<td>N/A</td>
	</tr>
</tbody>
Option Type Default Description Data Attribute
tagName String "a" 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 (e.g., finding URLs inside an a tag). data-linkify-tagname
target String "_blank" target attribute for each linkified tag. data-linkify-target
newLine String "\n" The character to replace new lines with. Replace with "<br>" to space out multi-line user content. data-linkify-newline

Building and Development Tasks

Setup

Linkify uses Grunt for building and testing, and Bower for dependency management. Both can be installed via npm by running:

npm install -g grunt-cli
npm install -g bower

Once you have those, navigate into the repo's root directory and run

npm install && bower install

Development

Each of these tasks can be called by running grunt taskName from the repo's root folder.

  1. default: Also available by just calling grunt, this task tests the plugin code in the src folder for JSHint compliance and builds and minifies it into the dist folder.

  2. demo: Builds everything and launches the demo page at localhost:8000.

  3. test: Runs the complete test suite, including JSHint and QUnit. QUnit tests will be executed at localhost:8001.

Authors

Linkify is handcrafted with Love by SoapBox Innovations, Inc.

About

Linkify is a jQuery plugin for finding URLs in plain-text and converting them to HTML links

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 58.5%
  • HTML 32.5%
  • CSS 9.0%