JSFiddle - React, Tailwind, and code Playground

by Alexander Lashchevsky

HTML

<input type="text" id="el">

JavaScript

/* value = "aaa921*****01bbb"; */
value = "8 (921)+s88-4-**--*";

document.getElementById('el').value = convert(value);

function convert(phone) {
  let value = phone.trim();

  if (value === '+') {
    return value;
  }

  value = value.replace(/[^0-9\*]/g, '').substring(0, 11);
  
  if (!value) {
    return '';
  }

  if (value.substring(0, 1) === '8') {
    value = `+7${value.substring(1)}`;
  } else if (value.substring(0, 1) === '7') {
    value = `+${value}`;
  } else if (value.substring(0, 2) !== '+7') {
    value = `+7${value}`;
  }

  value = value.replace(/^\+7([\d\*]{0,3})([\d\*]{0,3})([\d\*]{0,2})([\d\*]{0,2})/i, '+7 ($1) $2-$3-$4').replace(/(\d)(\D+)$/i, '$1');

  return value;
}