linkifyjs
Advanced tools
Package description
The linkifyjs package is a robust tool for finding links in plain text and converting them into clickable HTML hyperlinks. It is useful for enhancing user-generated content where links are not automatically hyperlinked.
Link Detection
Detects URLs and email addresses in plain text and provides details about them. This feature is useful for applications that need to extract hyperlink information from text.
const linkify = require('linkifyjs');
const text = 'Visit http://example.com for more info.';
const html = linkify.find(text);
console.log(html);Convert Text to HTML
Converts plain text containing URLs or email addresses into HTML with clickable links. This is particularly useful for rendering user-generated content safely in web applications.
const linkifyHtml = require('linkifyjs/html');
const text = 'See more at http://example.com.';
const linkedText = linkifyHtml(text);
console.log(linkedText);Like linkifyjs, autolinker is also designed to automatically convert URLs, email addresses, and Twitter usernames into clickable links in text. It offers additional features like customizing how links are displayed, which might be advantageous depending on the use case.
This package is simpler and more lightweight compared to linkifyjs, focusing solely on converting URLs within text to clickable HTML links. It lacks the broader feature set of linkifyjs, such as handling emails or advanced configuration options.
Readme
Linkify is a small yet comprehensive JavaScript plugin for finding URLs in plain-text and converting them to HTML links. It works with all valid URLs and email addresses.
Jump to
Add linkify and linkify-jquery to your HTML following jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>
$('p').linkify();
$('#sidebar').linkify({
target: "_blank"
});
linkify.find('Any links to github.com here? If not, contact test@example.com');
Returns the following array
[
{
type: 'url',
value: 'github.com',
href: 'http://github.com'
},
{
type: 'email',
value: 'test@example.com',
href: 'mailto:test@example.com'
}
]
var linkify = require('linkifyjs');
var linkifyStr = require('linkifyjs/string');
require('linkifyjs/plugin/hashtag')(linkify); // optional
linkifyStr('The site github.com is #awesome.', {
defaultProtocol: 'https'
});
Returns the following string
'The site <a href="https://github.com">github.com</a> is <a href="#awesome">#awesome</a>.'
<script src="r.js"></script>
<script src="linkify.amd.js"></script>
<script src="linkify-plugin-hashtag.amd.js"></script> <!-- optional -->
<script src="linkify-element.amd.js"></script>
require(['linkify'], function (linkify) {
linkify.test('github.com'); // true
linkify.test('github.com', 'email'); // false
});
require(['linkify-element'], function (linkifyElement) {
// Linkify the #sidebar element
linkifyElement(document.getElementById('#sidebar'), {
linkClass: 'my-link'
});
// Linkify all paragraph tags
document.getElementsByTagName('p').map(linkifyElement);
});
Note that if you are using linkify-jquery.amd.js, a jquery module must be defined.
<script src="jquery.js"></script>
<script src="linkify.js"></script>
<script src="linkify-string.js"></script>
<script src="linkify-jquery.js"></script>
linkify.test('dev@example.com'); // true
var htmlStr = linkifyStr('Check out soapboxhq.com it is great!');
$('p').linkify();
linkify (required)
.min.js · .js · .amd.min.js · .amd.js
Interfaces (recommended - include at least one)
.min.js · .js · .amd.min.js · .amd.js.min.js · .js · .amd.min.js · .amd.js.min.js · .js · .amd.min.js · .amd.jsPlugins (optional)
.min.js · .js · .amd.min.js · .amd.jsJump To
var linkify = require('linkifyjs');
<script src="linkify.amd.js"></script>
<script>
require(['linkify'], function (linkify) {
// ...
});
</script>
<script src="linkify.js"></script>
Finds all links in the given string
Params
String str Search stringReturns Array List of links where each element is a hash with properties type, value, and href
linkify.find('For help with GitHub.com, please email support@github.com');
Returns the array
[{
type: 'url',
value: 'GitHub.com',
href: 'http://github.com',
}, {
type: 'email',
value: 'support@github.com',
href: 'mailto:support@github.com'
}]
Is the given string a link? Not to be used for strict validation - See Caveats
Params
String str Test stringReturns Boolean
linkify.test('google.com'); // true
linkify.test('google.com', 'email'); // false
Internal method used to perform lexicographical analysis on the given string and output the resulting token array.
Params
String strReturns Array
Provides the Linkify jQuery plugin.
var $ = require('jquery');
require('linkifyjs/jquery')($);
Note that linkify-jquery requires a jquery module.
<script src="jquery.amd.js"></script>
<script src="linkify.amd.js"></script>
<script src="linkify-jquery.amd.js"></script>
require(['jquery'], function ($) {
// ...
});
<script src="jquery.js"></script>
<script src="linkify.js"></script>
<script src="linkify-jquery.js"></script>
var options = { /* ... */ };
$(selector).linkify(options);
Params
Object [options] Options hashThe jQuery plugin also provides a DOM data/HTML API - no extra JavaScript required!
<!-- 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, #footer">...</body>
Additional data options are available.
Interface for replacing links within native strings with anchor tags. Note that this function will not parse HTML strings properly - use linkify-element or linkify-jquery instead.
var linkifyStr = require('linkifyjs/string');
<script src="linkify.amd.js"></script>
<script src="linkify-string.amd.js"></script>
<script>
require(['linkify-string'], function (linkifyStr) {
// ...
});
</script>
<script src="linkify.js"></script>
<script src="linkify-string.js"></script>
Usage
var options = {/* ... */};
var str = 'For help with GitHub.com, please email support@github.com';
linkifyStr(str, options);
// or
str.linkify(options);
Returns
'For help with <a href="http://github.com" target="_blank">GitHub.com</a>, please email <a href="mailto:support@github.com">support@github.com</a>'
Params
String str String to linkifyObject [options] Options hashReturns String Linkified string
Plugins provide no new interfaces but add additional detection functionality to Linkify. A custom plugin API is currently in the works.
Adds basic support for Twitter-style hashtags.
// Node.js/Browserify
var linkify = require('linkifyjs');
require('linkifyjs/plugins/hashtag')(linkify);
<!-- Global `linkifyStr` -->
<script src="linkify.js"></script>
<script src="linkify-plugin-hashtag.js"></script>
<!-- AMD -->
<script src="linkify.amd.js"></script>
<script src="linkify-plugin-hashtag.amd.js"></script>
<script>
require(['linkify'], function (linkify) {
// ...
});
</script>
Usage
var options = {/* ... */};
var str = "Linkify is #super #rad";
linkify.find(str);
/* [
{type: 'hashtag', value: "#super", href: "#super"},
{type: 'hashtag', value: "#rad", href: "#rad"}
] */
// If the linkifyStr interface has also been included
linkifyStr(str)
Linkify is applied with the following default options. Below is a description of each.
var options = {
tagName: 'span',
defaultProtocol: 'https',
target: '_parent',
nl2br: true,
linkClass: 'a-new-link',
linkAttributes: {
rel: 'nofollow'
},
format: function (link, type) {
if (type === 'hashtag') {
link = link.toLowerCase();
}
return link;
},
formatHref: function (link, type) {
if (type === 'hashtag') {
link = 'https://twitter.com/hashtag/' + link.replace('#', '');
}
return link;
}
};
// jQuery
$('selector').linkify(options);
// String
linkifyStr(str, options);
str.linkify(options);
Coming soon
Linkify is handcrafted with Love by SoapBox Innovations, Inc.
FAQs
Find URLs, email addresses, #hashtags and @mentions in plain-text strings, then convert them into HTML links.
We found that linkifyjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.