jQuery plugin for having call option for phone numbers present in a web-page: With the advent of smartphones,

end users are almost accessing all web-sites in their handy smart-phones instead of switching-on their computers. This is one of the reasons why many web-sites have different views for desktop and mobile. Its always best to have an user interactive web pages. Some web-pages (Ex: Conta ct Us page) may contain phone numbers. Making these phone numbers clickable or t ouchable for having call option is more user interactive, and there comes handy this jQuery plugin. This plugin scans and converts phone numbers present in a web-page into links th at show call option when clicked or touched in mobile phone or tablet. It works only with HTML5 as this call option is a HTML5 tag. The plugin accepts regex of format of phone number, as there are different ways of displaying phone number. For example - 9988771234 can be shown as (998)-877-1 234. I've made the regex of phone number as optional. If regex is not passed, de fault regex for a straight 10 digit phone number (with out any formatting is con sidered. Below is the plug-in code. Its developed by me and its free to use and modify. " tagCallOptionForPhone" is the function name. ; (function($, window, document, undefined) { // Plugin namespace. var pluginName = 'tagCallOptionForPhone', defaults = { regexOfPhone : "[0-9]{10}", }; function Plugin(element, options) { this.element = element; this.options = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype = { init : function() { jQuery.data(this.element, pluginName, this.options); this.tagCallOption(); }, tagCallOption : var options if (options options } function() { = jQuery.data(this, "tagCallOptionForPhone"); == undefined) { = this.options;

var regex; var elem; var finalElem = new Array(); // Checking if regex is passed. Considreing default regex if not passsed.

if (options.regexOfPhone != '') { regex = new RegExp(options.regexOfPhone, "g"); } else { regex = new RegExp("[0-9]{10}", "g"); } elem = this.element; $(elem).each(function(i, val) { var html = ''; $(this.childNodes).each(function(i, val) { // Checking if the element is processed already. if ($(this).data('tagCallOptionProcessed') != 'Y') { if (!(this.nodeType == 8)) { // Skiping comments. var htmlToProcess = ''; if (undefined != this.innerHTML) { htmlToProcess = this.innerHTML; } else { htmlToProcess = this.textContent; } var matches = if (undefined var str = for ( var htmlToProcess.match(regex); != matches) { htmlToProcess; i = 0; i < matches.length; i++) {

var elem = matches[i]; var htmltemp = "<a href='tel:" + elem + "'>" + elem + "</a>"; // Main conversion part. str = str.replace(elem, htmltemp); } var clone = $(this).clone(); $(clone).html(str); if (undefined != clone[0].outerHTML) { html += clone[0].outerHTML; } else { html += str; } } else { if (undefined != this.outerHTML) { html += this.outerHTML; } else { html += this.nodeValue; } } } // Adding data to the element to avoid repeated proc essings. $(this).data('tagCallOptionProcessed', 'Y'); } else { if (undefined != this.outerHTML) { html += this.outerHTML; } else { html += this.nodeValue; } } }); $(this).html(html); }); // Removing the data after processing is complete.

$(elem).removeData('tagCallOptionProcessed'); } }; $.fn[pluginName] = function(options) { return this.each(function() { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, option s)); } }); }; })(jQuery, window, document);

Sample snippets on how to use the plugin: $(document).ready(function(){ $('body').tagCallOptionForPhone({ regexOfPhone : "[0-9]{10}", }); } ); $(document).ready(function(){ $('body').tagCallOptionForPhone(); } ); Above code directs the plugin to scan all the html elements present inside body tag. For a phone number of the format (123)-4567890. Regex to be passed is "\\([0-9]{ 3}\\)-[0-9]{7}" Remove regex tags and pass regex like a string. Do not pass /^ and &/ which are usually present in starting and ending of regex.