Skip to content

Instantly share code, notes, and snippets.

@jonjaques

jonjaques/index.html

Created May 9, 2016 21:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonjaques/db45a4c0cf38e87993b79612660d4115 to your computer and use it in GitHub Desktop.
Save jonjaques/db45a4c0cf38e87993b79612660d4115 to your computer and use it in GitHub Desktop.
Download ZIP
Micro jQuery plugin to automatically link emails and telephone numbers.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus magna a dapibus consequat. Nullam vestibulum scelerisque ipsum sit amet placerat. Nam nec diam sollicitudin, dictum velit sed, elementum libero. Cras ut interdum leo, in commodo odio. Ut sed metus ut lacus semper scelerisque non tincidunt lectus. Phasellus eu diam hendrerit, maximus ipsum pulvinar, +2(202)-302-2300 dignissim nulla. Phasellus aliquam, mauris eu bibendum blandit, eros augue varius nibh, auctor pellentesque metus purus vitae arcu. Donec velit tellus, jon@3five.com iaculis ut fringilla at, vestibulum nec libero. Proin convallis, lectus sit amet hendrerit maximus, neque est hendrerit ipsum, ut viverra diam velit id nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque placerat ex in lobortis molestie. Ut elementum volutpat mollis. Quisque porta, arcu a fermentum aliquam, sapien orci porttitor lectus, a molestie diam dolor sed quam.</p>
<p>Integer vel hendrerit leo. Aenean urna tellus, interdum eget nisl vitae, viverra egestas ex. Suspendisse potenti. Donec aliquam, augue ac sollicitudin ultricies, metus augue ultrices magna, et rutrum eros mauris at velit. In malesuada ex eros, accumsan laoreet nulla lacinia sit amet. Quisque nibh libero, tincidunt id iaculis ac, rhoncus et sapien. Suspendisse quis diam ut nulla placerat rhoncus ac et orci.</p>
<div>
Pellentesque pharetra est sed 763-244-5039 dignissim ultricies. Mauris laoreet urna accumsan neque posuere ultricies. Curabitur at aliquet felis. Cras vel posuere ligula. Pellentesque semper 1(482)486-6780 pellentesque risus, non feugiat lacus maximus sed. Aenean malesuada ipsum sit amet sapien commodo, facilisis finibus enim tincidunt. Nulla eget aliquet enim. Sed eget felis dictum, sollicitudin arcu quis, tincidunt ligula.
<div>
Nulla finibus lorem sed nunc aliquet, at dignissim felis vehicula. Donec tincidunt, nunc sit amet commodo semper, quam mi egestas justo, quis semper velit urna at ligula. Duis dapibus 464.648.8700 leo at porttitor laoreet. Mauris venenatis vestibulum nisl in eleifend. Ut mauris magna, semper quis odio a, aliquam blandit nulla. Mauris sagittis et justo at euismod. Duis varius turpis vitae ante ultrices jon@3five.com suscipit. Phasellus vel mauris eu ante tincidunt pretium. Quisque nec turpis convallis, fermentum purus laoreet, auctor nunc. Etiam pretium euismod mattis. Pellentesque quis nisi id quam tristique mattis sed non urna. Etiam facilisis quam ac justo pretium, sit amet sagittis odio interdum. Nunc sed nisl maximus, imperdiet magna a, faucibus ante. Donec diam massa, vulputate a metus ac, ultrices consectetur magna. Mauris feugiat tempor mauris, sed faucibus enim sollicitudin quis.
<p>
Quisque felis tellus, commodo et tortor sed, vulputate dapibus erat. In ac ultrices odio, vel scelerisque dui. Aenean feugiat mauris sem, non egestas erat porta vitae. Nullam erat orci, porta sit amet mi at, ornare pellentesque libero. Mauris elementum sem eu urna porta fringilla.
<ul>
<li>Ut <b>interdum <i>orci@dui.com</i> things and stuff</b>, </li>
<li>id rutrum risus imperdiet vitae. </li>
<li>Praesent a odio enim.
<ul>
<li>Ut <b>interdum <i>orci@dui.com</i> things and stuff</b>, </li>
<li>id rutrum risus imperdiet vitae. </li>
<li>Praesent a odio enim.
<ul>
<li>Ut <b>interdum <i>orci@dui.com</i> things and stuff</b>, </li>
<li>id rutrum risus imperdiet vitae. </li>
<li>Praesent a odio enim.</li>
</ul>
</li>
</ul>
</li>
</ul>
Integer non nisi dui. Suspendisse dignissim iaculis rhoncus. Vivamus pretium libero dolor, sit amet tempor leo pellentesque ultricies. Nam ac nisl nec ipsum pretium consectetur. In semper sem eget magna dignissim, in bibendum ipsum congue.</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="linker.jquery.js"></script>
<script>
$(function() {
var container = $('#container')
console.time('test')
container.linker()
console.timeEnd('test')
})
</script>
</body>
</html>
Raw
linker.jquery.js
(function($) {
$.fn.linker = function(options) {
var defaults = {
allowedTags: [
'div',
'section',
'main',
'aside',
'ul',
'ol',
'li',
'p',
'em',
'strong',
'b',
'i',
'span'
]
}
var o = $.extend(true, {}, defaults, options)
return this.each(function(i, el) {
return walker($(this))
})
function walker($sel) {
$sel.contents().each(function() {
var $el = $(this)
// Only transform text nodes
if (this.nodeType === 3) {
return $el.replaceWith(transformer($el.text()))
}
// If regular dom node, and within allowedTags, traverse!
if (this.nodeType === 1) {
if (o.allowedTags.indexOf(this.nodeName.toLowerCase()) > -1) {
return walker($el)
}
}
})
}
// transforms text/html fragment by wrapping
// emails and tel's with their appropriate links
function transformer(html) {
html = html.replace(transforms.email.tester, transforms.email.builder)
html = html.replace(transforms.phone.tester, transforms.phone.builder)
return html;
}
}
var transforms = {
phone: {
tester: /(\+?\d?[\ \-]?\(\d{3}\)|\d{3})[-\. ]?\d{3}[\-\.]?\d{4}/g,
builder: function(input) {
var output = '<a ' + 'href="tel:' + input + '" target="_top">' + input + '</a>'
return output
}
},
email: {
tester: /[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*/g,
builder: function(input) {
var output = '<a ' + 'href="mailto:' + input + '" target="_top">' + input + '</a>'
return output
}
}
}
})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment