Disable Skype number highlighting with Javascript

Skype® messing up your style? Installing skype automatically highlights all recognizable phone numbers found on web pages in sometimes unfortunate ways

As a developer, you’d think I’d keep on top of the latest of internet technologies…so I installed Skype® for the first time about a week and a half ago – a useful little tool for keeping in touch with co-workers and clients, I might add – but also a huge pain in my, and any designer’s, ass.

Quite often on web pages, phone numbers are used as aspects of the design, in addition to providing useful contact information…apparently the people at Skype® were never aware of this. The title image of this post was taken from a page I was coding out for a company I contract with, and you can see how Skype® screwed with the nice placement, color, and typography of the number in the design and made it disgusting.

After searching high and low, I found a couple of fairly recent forum threads that were futile. One of which depended on user participation, and the other offered a valid attempt, but ultimately didn’t work.

The reason is because Skype® installs a browser plugin that adds the following code to your HTML (after the closing body tag):

<span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span>
<object id="skype_plugin_object" location.href="http://myserver.dev/path/to/file" location.hostname="myserver.dev" style="position: absolute; visibility: hidden; left: -100px; top: -100px; " width="0" height="0" type="application/x-vnd.skype.toolbars.npplugin.4.2.0"></object>

And it turns something that originally looks like this:

<span>709 689 1200</span>

into this ridiculously invalid mess (whoever heard of the attribute ’skypeaction’?):

<span class="skype_pnh_print_container">709 689 1200</span>
 <span tabindex="-1" dir="ltr" class="skype_pnh_container">
  <span class="skype_pnh_mark"> begin_of_the_skype_highlighting</span>&nbsp;
  <span dir="ltr" title="Call this phone number in Canada with Skype: +17096891200" class="skype_pnh_highlighting_inactive_common">
   <span skypeaction="skype_dropdown" class="skype_pnh_left_span">&nbsp;&nbsp;</span>
   <span skypeaction="skype_dropdown" title="Skype actions" class="skype_pnh_dropart_span">
    <span skypeaction="skype_dropdown" style="background-position: -961px 1px ! important;" class="skype_pnh_dropart_flag_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    &nbsp;&nbsp;&nbsp;
   </span>
   <span class="skype_pnh_textarea_span">
    <span class="skype_pnh_text_span">709 689 1200</span>
   </span>
   <span class="skype_pnh_right_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </span>&nbsp;
  <span class="skype_pnh_mark">end_of_the_skype_highlighting</span>
 </span>
</span>

Note: the plugin is so freaking annoying that it actually took me over 45 minutes to try and paste the above HTML into the WordPress editor because the plugin kept removing most of it!!!

So you can try and style it all you want, throw around !important in all the seemingly right places, or even use Javascript to remove all the extra spans on page load, but as soon as you do, the plugin just re-inserts all the code and uglies it up again.

So you can do what the first forum post and ask your users to turn off the skype plugin in order to view your kick-ass design…but that appears much akin to the following message the developers use to put on their web pages in the late-90s.

So thanks for sticking with me for this long and now you’ll be kindly rewarded with the solution – all it takes is a little bit of Javascript (which I’ve used jQuery to demonstrate):

$(document).ready(function() {
    clearSkype()
});

function clearSkype() {
	if(!$('#skype_plugin_object').length) { return; }
	$('#skype_plugin_object').remove();
	$('span.skype_pnh_print_container').each(function() {
		var originalPhone_ = $(this).text();
		//get all the html that is not in print_container or container
		var originalHTML_ = $(this).parent().html();
		$(originalHTML_).find('span.skype_pnh_print_container').replaceWith(originalPhone_);
		$(originalHTML_).remove('span.skype_pnh_container');
		$(this).parent().html($(originalHTML_));
	});
}

Here’s the idea. First, remove the object so that any changes you make to the DOM won’t be undone by the ever watchful eye of the plugin. Then, this snippet does a little more than just remove all the extra spans and replace it with the original phone number. I mean, what happens if you had the phone number in a the middle of a sentence, or some other amount of complex HTML? So here’s what it does:

Check to see if the Skype® plugin is enabled in the user’s browser, and if it is, remove it:

	if(!$('#skype_plugin_object').length) { return; }
	$('#skype_plugin_object').remove();

Run a function on every highlighted phone number on the page:

	$('span.skype_pnh_print_container').each(function() {

And finally, in order of line number, (1) get the original phone number out of it’s Skype-enclosed span, (2) get all of the original HTML that the phone number was enclosed in (not including the Skype-generated spans, of course), (3) then, in the HTML string originalHTML_ replace the Skype-generated spans with the original phone number, and (4) remove the Skype generated spans and, finally (5) put all the HTML back the way it was:

	var originalPhone_ = $(this).text();
	var originalHTML_ = $(this).parent().html();
	$(originalHTML_).find('span.skype_pnh_print_container').replaceWith(originalPhone_);
	$(originalHTML_).remove('span.skype_pnh_container');
	$(this).parent().html($(originalHTML_));

Thanks for reading this over-written blog post to get to the dozen lines of code that solved your problem! Give me a link back or leave a comment to let me know if I helped you out!