JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- It should not target any number set surrounded by so many other numbers -->
908450392840985274984736549873509845374307<br>
Hello
Phone
<h1>
Greetings!
</h1>
<h2>
<!-- Here are the easy ones... -->
I'm text <a href="tel:17012770186">701-277-0186</a><br>
<a href="tel:1-701-277-0181">701-277-0181</a>
</h2>
<h3>
<!-- Now the standard difficulty formats -->
(867)111-5309
</h3>
(867) 111-5309
<h4>
222.134-1175
</h4>
<h5>
123.456.7890
</h5>
<h6>
<!-- Now for some href markup written by total ding dongs! --><br>
<a href="tel:1(723) 342-0128">(723) 342-0128</a><br>
<a href="tel:101.555.1337">156.222.2238</a>
</h6>
CSS
@import url("https://fonts.googleapis.com/css?family=Zilla+Slab:400,400i,700");
body{
font-family:'Zilla Slab', sans-serif;
}
a{
border-bottom:3px solid #259ac3;
margin-bottom:15px;
color:#000;
text-decoration:none;
}
JavaScript
jQuery(document).ready(function () {
//Throw the phone number you want everything to flip to right here, swap it to something else to see it in action
var swapTarget = '123-456-7890';
//This is the bit that recognises a phone number
var regex = /(((\(\d{3}\) ?)|(\d{3}-)|(\d{3}\.))?\d{3}(-|\.)\d{4})/g;
//Tells the script where to search in the document
var text = jQuery("body:first").not('script').html();
//Makes the text var look for our regex and swap it for our new number
text = text.replace(regex, swapTarget);
//Turns the text var loose on the DOM to switch out the phone numbers
jQuery("body").html(text);
/*===============================================
We've made it half way and nothing has erupted into flames, take a moment to pat yourself on the back and then check below to make sure you have the right vars set.
===============================================*/
//Format the swap target for an href
//swapTarget.text( swapTarget.text().replace('-', '') );
var swapTarget = '"tel:1' + swapTarget + '"';
console.log(swapTarget);
//Now to handle those pesky href numbers with a different selector...
var regex = /((\"tel:((\d{11})|(\d{10})|(((\(\d{3}\) ?)|(\d{3}-)|(\d{3}\.))?\d{3}(-|\.)\d{4}))\"))/g;
//Makes the text var look for our regex and swap it for our new number
text = text.replace(regex, swapTarget);
//Fire the main cannons!
jQuery("body").html(text);
});