Letters (JS)

index.html

<h2>Count letters in text</h2>
<p>Enter some text and watch the script count each letter in it, and return as a sorted list, most common first.</p>
<form>
<textarea style="width:90%;height:400px;" id="para"></textarea>
</form>

<ul id="alpha"></ul>

letters-js.markdown

Letters (JS)

A Pen by Charles on CodePen.

License.

script.js

document.getElementById('para').addEventListener( 'keyup', function() {
  let para = document.getElementById( 'para' ).value;
  let characters = para.split("").reduce( function( a, x ) { return character_count( a, x ); }, {} );
  let sorted = Object.keys( characters ).sort( function( a, b ){ return characters[ b ] - characters[ a ] } );
  let dom_out = document.getElementById( 'alpha' );
  dom_out.innerHTML = "";
  for ( idx in sorted ) {
    print_character( sorted[ idx ], characters, dom_out )
  }
} );

function print_character( character, characters, dom_out ) {
  let asc = character.charCodeAt( 0 );
  if ( 96 < asc && 123 > asc ) {
    // lowercase letter characters are ASCII 97-122 inclusive
    // console.log( character, characters[ character ] );
    let dom_character = format_character( character, characters[ character ] );
    dom_out.appendChild( dom_character );
  }
}

function format_character( character, count ) {
  let dom_output = document.createElement( 'li' );
  dom_output.innerHTML = character + ": " + count;
  return dom_output;
}

function character_count( a, x ) {
  x = x.toLowerCase();
  if ( ! a[ x[0] ] ) {
    a[ x[0] ] = 0;
  }
  a[ x[0] ] ++;
  return a;
}