JSFiddle - React, Tailwind, and code Playground

by John Allan

HTML

<div id="ph">

</div>

JavaScript

function formatPhone (phone) {

    if (/^\d{10}$/.test(phone)){
      return phone.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
    }

    if (/^\+*1\d{10}$/.test(phone)) {
      return phone.replace(/(?:\+*)(1)(\d{3})(\d{3})(\d{4})/, '+$1 ($2) $3-$4');
    }
    
   return phone;
}



console.clear();
console.log(`<p>${formatPhone('7788375218')}</p>`); // (778) 837-5218
console.log(`<p>${formatPhone('+17788375218')}</p>`); // +1 (778) 837-5218
console.log(`<p>${formatPhone('17788375218')}</p>`); // +1 (778) 837-5218
console.log(`<p>${formatPhone('+27788375218')}</p>`); // +1 (778) 837-5218