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.
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>Run bower install jQuery-linkify from your project's root folder.
To detect links within any set of elements, just call $(selector).linkify() on document load.
<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();
});<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>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>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 |
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 bowerOnce you have those, navigate into the repo's root directory and run
npm install && bower installEach of these tasks can be called by running grunt taskName from the
repo's root folder.
-
default: Also available by just callinggrunt, this task tests the plugin code in thesrcfolder for JSHint compliance and builds and minifies it into thedistfolder. -
demo: Builds everything and launches the demo page at localhost:8000. -
test: Runs the complete test suite, including JSHint and QUnit. QUnit tests will be executed at localhost:8001.
Linkify is handcrafted with Love by SoapBox Innovations, Inc.