JSFiddle - React, Tailwind, and code Playground

by lookitstony

HTML

<ul id="log"></ul>

JavaScript

function format(tel,options){
            if (!tel) { return ""; }

            var value = tel.toString().trim().replace(/^\+/, "");

            if (value.match(/[^0-9]/)) {
                return tel;
            }

            var country, city, number;

            switch (value.length) {
            case 10: // +1PPP####### -> C (PPP) ###-####
                country = 1;
                city = value.slice(0, 3);
                number = value.slice(3);
                break;

            case 11: // +CPPP####### -> CCC (PP) ###-####
                country = value[0];
                city = value.slice(1, 4);
                number = value.slice(4);
                break;

            
            case 12: // +CCCPP####### -> CCC (PP) ###-####
            case 13:
            case 14:
            case 15:
                var countrylength = value.length - 10;
                country = value.slice(0, countrylength);
                city = value.slice(countrylength, countrylength+3);
                number = value.slice(countrylength+3);
                break;

            default:
                return tel;
            }

            if (country == 1) {
                country = "";
            }

            var customDelimiter = (options && options.delimiter);

      number = number.slice(0, 3) + (customDelimiter || "-") + number.slice(3);
//return country + ' | ' + city + ' | ' + number;
            return (country + ((country && customDelimiter) || (customDelimiter ? "" : " (")) + city + (customDelimiter || ") ") + number).trim();
        }
$('#log').append('<li>' + format(1234567890) + '</li>');
$('#log').append('<li>' + format(11234567890) + '</li>');
$('#log').append('<li>' + format(121234567890) + '</li>');
$('#log').append('<li>' + format(1231234567890) + '</li>');
$('#log').append('<li>' + format(12341234567890) + '</li>');
$('#log').append('<li>' + format(123451234567890) + '</li>');