Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
autolinker
Advanced tools
Utility to automatically link the URLs, email addresses, and Twitter handles in a given block of text/HTML
Autolinker is a utility for automatically linking URLs, email addresses, phone numbers, and social media handles in plain text. It transforms these elements into clickable links, making it easier to navigate and interact with text content.
Link URLs
Automatically converts URLs in the text into clickable links.
const Autolinker = require('autolinker');
const linkedText = Autolinker.link('Check out this website: www.example.com');
console.log(linkedText); // 'Check out this website: <a href="http://www.example.com" target="_blank">www.example.com</a>'
Link Email Addresses
Automatically converts email addresses in the text into clickable mailto links.
const Autolinker = require('autolinker');
const linkedText = Autolinker.link('Contact us at info@example.com');
console.log(linkedText); // 'Contact us at <a href="mailto:info@example.com">info@example.com</a>'
Link Phone Numbers
Automatically converts phone numbers in the text into clickable tel links.
const Autolinker = require('autolinker');
const linkedText = Autolinker.link('Call us at 123-456-7890');
console.log(linkedText); // 'Call us at <a href="tel:123-456-7890">123-456-7890</a>'
Link Social Media Handles
Automatically converts social media handles in the text into clickable links to the respective social media profiles.
const Autolinker = require('autolinker');
const linkedText = Autolinker.link('Follow us on Twitter @example');
console.log(linkedText); // 'Follow us on Twitter <a href="https://twitter.com/example" target="_blank">@example</a>'
LinkifyJS is a versatile library for finding and converting URLs, email addresses, and hashtags in plain text into clickable links. It offers more customization options compared to Autolinker, such as custom link types and formats.
AnchorJS is a lightweight library that adds anchor links to headings in your HTML content. While it focuses on a different use case than Autolinker, it provides a simple way to enhance navigation within a document.
Linkify-it is a fast and lightweight library for finding and converting URLs in plain text into clickable links. It is highly customizable and can be extended with plugins to support additional link types.
Because I had so much trouble finding a good autolinking implementation out in the wild, I decided to roll my own. It seemed that everything I found out there was either an implementation that didn't cover every case, or was just limited in one way or another.
So, this utility attempts to handle everything. It:
href
attribute inside anchor (<a>) tags (or any other
tag/attribute for that matter), and will not accidentally wrap the inner text of an anchor tag with a new one (which would cause
doubly-nested anchor tags).Hope that this utility helps you as well!
Simply clone or download the zip of the project, and link to either dist/Autolinker.js
or dist/Autolinker.min.js
with a script tag:
<script src="path/to/Autolinker.min.js"></script>
Command line:
bower install Autolinker.js --save
Command Line:
npm install autolinker --save
JavaScript:
var Autolinker = require( 'autolinker' );
// note: npm wants an all-lowercase package name, but the utility is a class and should be
// aliased with a captial letter
Using the static link()
method:
var linkedText = Autolinker.link( textToAutolink[, options] );
Using as a class:
var autolinker = new Autolinker( [ options ] );
var linkedText = autolinker.link( textToAutoLink );
Note: if using the same options to autolink multiple pieces of html/text, it is slightly more efficient to create a single
Autolinker instance, and run the link()
method repeatedly (i.e. use the "class" form above).
var linkedText = Autolinker.link( "Check out google.com", { className: "myLink" } );
// Produces: "Check out <a class="myLink myLink-url" href="http://google.com" target="_blank">google.com</a>"
These are the options which may be specified for linking. These are specified by providing an Object as the second parameter to Autolinker.link()
. These include:
newWindow : Boolean
true
to have the links should open in a new window when clicked, false
otherwise. Defaults to true
.
stripPrefix : Boolean
true
to have the 'http://' or 'https://' and/or the 'www.' stripped from the beginning of links, false
otherwise. Defaults to true
.
truncate : Number
A number for how many characters long URLs/emails/twitter handles should be truncated to inside the text of a link. If the URL/email/twitter is over the number of characters, it will be truncated to this length by replacing the end of the string with a two period ellipsis ('..').
Example: a url like 'http://www.yahoo.com/some/long/path/to/a/file' truncated to 25 characters may look like this: 'yahoo.com/some/long/pat..'
className : String
A CSS class name to add to the generated anchor tags. This class will be added to all links, as well as this class
plus "url"/"email"/"twitter" suffixes for styling url/email/twitter links differently.
For example, if this config is provided as "myLink", then:
urls : Boolean
true
to have URLs auto-linked, false
to skip auto-linking of URLs. Defaults to true
.
email : Boolean
true
to have email addresses auto-linked, false
to skip auto-linking of email addresses. Defaults to true
.
twitter : Boolean
true
to have Twitter handles auto-linked, false
to skip auto-linking of Twitter handles. Defaults to true
.
replaceFn : Function
A function to use to programmatically make replacements of matches in the input string, one at a time. See the section
Custom Replacement Function for more details.
For example, if you wanted to disable links from opening in new windows, you could do:
var linkedText = Autolinker.link( "Check out google.com", { newWindow: false } );
// Produces: "Check out <a href="http://google.com">google.com</a>"
And if you wanted to truncate the length of URLs (while also not opening in a new window), you could do:
var linkedText = Autolinker.link( "http://www.yahoo.com/some/long/path/to/a/file", { truncate: 25, newWindow: false } );
// Produces: "<a href="http://www.yahoo.com/some/long/path/to/a/file">yahoo.com/some/long/pat..</a>"
One could update an entire DOM element that has unlinked text to auto-link them as such:
var myTextEl = document.getElementById( 'text' );
myTextEl.innerHTML = Autolinker.link( myTextEl.innerHTML );
Using the same pre-configured Autolinker instance in multiple locations of a codebase (usually by dependency injection):
var autolinker = new Autolinker( { newWindow: false, truncate: 25 } );
//...
autolinker.link( "Check out http://www.yahoo.com/some/long/path/to/a/file" );
// Produces: "Check out <a href="http://www.yahoo.com/some/long/path/to/a/file">yahoo.com/some/long/pat..</a>"
//...
autolinker.link( "Go to www.google.com" );
// Produces: "Go to <a href="http://www.google.com">google.com</a>"
A custom replacement function (replaceFn
) may be provided to replace url/email/twitter matches on an individual basis, based
on the return from this function.
Full example, for purposes of documenting the API:
var input = "..."; // string with URLs, Email Addresses, and Twitter Handles
var linkedText = Autolinker.link( input, {
replaceFn : function( autolinker, match ) {
console.log( "href = ", match.getAnchorHref() );
console.log( "text = ", match.getAnchorText() );
switch( match.getType() ) {
case 'url' :
console.log( "url: ", match.getUrl() );
if( match.getUrl().indexOf( 'mysite.com' ) === -1 ) {
var tag = autolinker.getTagBuilder().build( match ); // returns an `Autolinker.HtmlTag` instance, which provides mutator methods for easy changes
tag.setAttr( 'rel', 'nofollow' );
tag.addClass( 'external-link' );
return tag;
} else {
return true; // let Autolinker perform its normal anchor tag replacement
}
case 'email' :
var email = match.getEmail();
console.log( "email: ", email );
if( email === "my@own.address" ) {
return false; // don't auto-link this particular email address; leave as-is
} else {
return; // no return value will have Autolinker perform its normal anchor tag replacement (same as returning `true`)
}
case 'twitter' :
var twitterHandle = match.getTwitterHandle();
console.log( twitterHandle );
return '<a href="http://newplace.to.link.twitter.handles.to/">' + twitterHandle + '</a>';
}
}
} );
The function is provided two arguments:
autolinker.getTagBuilder()
).Autolinker.match.Match
object which details the match that is to be replaced.A replacement of the match is made based on the return value of the function. The following return values may be provided:
undefined
), or true
(Boolean): Delegate back to Autolinker to replace the match as it normally would.false
(Boolean): Do not replace the current match at all - leave as-is.Autolinker.HtmlTag
instance, which can be used to build/modify an HTML tag before writing out its HTML text.Autolinker.HtmlTag
class, and allow it to be used in the replaceFn
replaceFn
option//google.com
, which will effectively either have the http://
or https://
protocol depending on the protocol that is hosting the website)abc:def
would be autolinked as a protocol and domain name URL. Autolinker now
requires the domain name to have at least one period in it to be considered.className
option for easily styling produced links (thanks @busticated)var autolinker = new Autolinker( { newWindow: false, truncate: 25 } );
autolinker.link( "Check out http://www.yahoo.com/some/long/path/to/a/file" );
// Produces: "Check out <a href="http://www.yahoo.com/some/long/path/to/a/file">yahoo.com/some/long/pat..</a>"
This allows options to be set on a single instance, and used throughout a codebase by injecting the autolinker
instance as a dependency to the modules/classes that use it. (Note: Autolinker may still be used with the static Autolinker.link()
method as was previously available as well.)
grunt test
)(Thanks to @busticated!)
en.wikipedia.org/wiki/IANA_(disambiguation)
(thanks @dandv)Merged pull requests from @afeld:
Thanks Aidan :)
truncate
option.FAQs
Utility to automatically link the URLs, email addresses, phone numbers, hashtags, and mentions (Twitter, Instagram) in a given block of text/HTML
The npm package autolinker receives a total of 736,876 weekly downloads. As such, autolinker popularity was classified as popular.
We found that autolinker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.