<h2>Type stuff in the box</h2>
<textarea rows=5></textarea>
<table id="table">
  <thead>
    <tr>
      <th>Word</th>
      <th>Appearance Count</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
textarea { 
  width: 100% ;
  border: 2px solid gray;   
}

table {
  margin-top: 20px;
  width: 100%;  
}
var $table = $(table);
var countTable = Handlebars.compile(`
  {{#each counts}}
  <tr>
    <td>{{@key}}</td>
    <td>{{this}}</td>
  </tr>
  {{/each}}
`);

function calculateCounts(text) {
  const words = text.split(/\W+/).filter((w) => w.length > 0);
  return _.countBy(words);
}

function refreshTable() {
  $('tbody', $table).empty();
  var counts = calculateCounts($('textarea').val());
  $('tbody').html(countTable({ counts }));
}

$('textarea').on('input', refreshTable);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js