Hide Phone Numbers on Website using Jquery

When we create a website many of our clients want to show their phone numbers over the website. But due to the bots they want it to get it hide. Now here is a solution which will show you some of the starting numbers of your phone and if you need the full then you have to click over the number. Its like click to revel the hidden number.




This is totally done via Jquery so before using the script please ensure that you have Jquery in your project.

This is my HTML code to show the phone number.

<h2 class="phone" data-tel="+91 98200 00000"><a href="#">show number</a></h2>

If you run the above html you will see “Show number” over the page. Now to revel the hidden phone number use the below script.

(function($) {
	$.fn.hidePhoneNum = function(options) {

		var settings = $.extend({
			showNumber: 3,
			linkClass: 'tel-link'
		}, options);

		return this.each(function() {
			var telNum = $(this).data("tel"),
					htmlNum = $(this).html(),
					myRegex = /[\s-\(\()]/g,
					telNewNum = telNum.replace(myRegex, '');

			$(this).html(telNum.substr(0, settings.showNumber) + " " + htmlNum);

			$(this).find('a').on('click', function(e) {
				e.preventDefault();
				$(this).parent().html("<a href='tel:"+telNewNum+"' class='"+settings.linkClass+"'>"+telNum+"</a>")
			})

		});
	};
}(jQuery));

Above script done’s the magic but to use the magic we have to use it using our html class.

 $('.phone').hidePhoneNum({showNumber: 7,linkClass: 'tel-link' });

In the above script you can see we are using the class “.phone” to access the phone number and “7” in the function is the characters which you want to revel at starting.  You can use it according to your need.

Hope you like it and surely it will help you in your project. If you face any issue than please comment below.