Remove invalid characters from the href="tel:" attribute using jQuery

Question

I have a HTML5 telephone link:

<a href="tel:+44 (0) 1234 567 890">

Currently, the href attribute is getting the data from a field in the CMS, which I can't edit. I know that the number format is not correct as the telephone link leads to an error page when tapped/clicked.

I want the href attribute to be written like this so it is compatible with all mobile devices:

<a href="tel:+441234567890">

How can I use jQuery to remove the spaces and (0) characters from the href attribute?

Answer 1

You can use this to fix all links whose href starts with tel: :

$('a[href^="tel:"]').attr('href', function(_,v){
    return v.replace(/\(0\)|\s+/g,'')
});

Demonstration

This uses the replace function taking a regular expression as parameter. The regex I use can be understood like this :

• \(0\) : "(0)" with parenthesis escaped
• | : or
• \s+ : at least one space

The g flag at the end of the regex makes it apply more than once.

So it replaces (0) or spaces with an empty string.