JSFiddle - React, Tailwind, and code Playground

by Francisco Maria Calisto

HTML

<body ng-app>
  <label for="pN">Phone number:</label>
  <input id="pN" type="text" value="1-800-CALL-MOM"></input>
<div style="height: 10px; border-bottom: 1px dotted silver;margin-bottom: 10px;"></div>

<div class="wrapper">PhoneNumberToDisplay: <div id="out1"></div></div>

<div class="wrapper">Letters Converted: <div id="out2"></div></div>

<div class="wrapper">PhoneNumberToDial: <div id="out3"></div></div>


  <div id="out4"></div>
  <div id="out3"></div>
</body>

CSS

* { font-family: sans-serif; padding: 4px; }
#out1,#out2,#out3 { color: #999; display: inline-block;}
#out1 {
  font-weight: bold;
}

JavaScript

var phoneLetterToDigit = ['2','2','2','3','3','3','4','4','4','5','5','5','6','6','6','7','7','7','7','8','8','8','9','9','9','9'];

var raw = '';
var digitsReplaced = '';
var numbersOnly = '';

$('#pN').keyup(function () {
  update();
});

function update() {
  raw = $("#pN").val();
  digitsReplaced = '';
  
  $.each(raw.split(''), function(a,b) {
    var l = b.toUpperCase().charCodeAt(0) - 65;
    
    if (l >= 0 && l <= 25) {
       digitsReplaced += phoneLetterToDigit[l];
    }
    else {
      digitsReplaced += b;
    }
  });
  
  numbersOnly = digitsReplaced.replace(/[^0-9.]/g,'');
  
  $("#out1").html(raw);
  $("#out2").html(digitsReplaced);
  $("#out3").html(numbersOnly);
}

update();