JavaScript Challenge: Counting Words

This is useful to render word clouds, emphasizing more commonly occurring words in a database.

Optimized Version:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>  
$(document).ready(function(){  //self executing anonymous function
// Algorithm:
// Load text file > split into array of words (Original Array) > create new array to store the results >
// Parse through each item in the original array: if new word, then add to New Array; if not new word, then increase count of item already exists in New Array

var testString ="monkey monkey fas af aoi i aofi ioa dfi ajoen ais nfieoa iodf ni 213 j0 ajsd 3j 325 u324 3 ji noi ai03 n43 mp3 cow cow cow";

var regexWord=/\b[^\d\W]+\b/g	// Matches words without any digits (https://regex101.com)
var regexSingleChar=/[^\d\W]/g // Matches single char
var wordsArray=testString.match(regexWord).sort(); // Match function also converts String to Array, which will enable the sort function

// Initialize resultArray with 2 dimensions
var resultArray=[[wordsArray[0],1]];
var resultArrayLength=1;
  
// Loop through original array and build up resultArray as 2-dimensional
for (var i=1; i< wordsArray.length; i++){
  // This is a faster method because we're dealing with sorted arrays
  if ( wordsArray[i-1] == wordsArray[i]){
    resultArray[resultArrayLength-1][1]+=1;
  }
  else{
    resultArray.push([wordsArray[i],1]);
resultArrayLength++;
  }    
}

// Display results with font sizes as direct correlation to count

//document.getElementById("Result").innerHTML = resultArray;  
function displayResult()
{
   var output = "<hr/>"; 
  //console.log(output);
   for (var k=0; k<resultArray.length; k++)
   {
     //console.log(output);
     //output += "Element " + k + " = " + resultArray[k][0] + "<br/>";
     output += `${resultArray[k][0]} ${resultArray[k][1]}<br/>`;
   }
  
   document.getElementById("Result").innerHTML = output;
  console.log(output)
}  

displayResult();  
  
}); //end self executing anonymous function

</script>


<input type="text" id="url" value="https://blog.kimconnect.com"></input>
<input type="button" id="button1" value="Process" onclick="httpGet(url.text);"></input>
<input type="button" id="button2" value="Display" onclick="displayResult();"></input>
<div id="Result"></div> 

Un-optimized Version:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>  
$(document).ready(function(){  //self executing anonymous function
// Algorithm:
// Load text file > split into array of words (Original Array) > create new array to store the results >
// Parse through each item in the original array: if new word, then add to New Array; if not new word, then increase count of item already exists in New Array

  /*
var testString;

//var url = document.getElementById("url").value;  
var url = "https://blog.kimconnect.com"
  
testString = $.get(url, function( testString) {
    return testString.text();
}); 

console.log(testString)  
  */
//var testString=xmlhttp.send();
  
var testString ="monkey monkey fas af aoi i aofi ioa dfi ajoen ais nfieoa iodf ni 213 j0 ajsd 3j 325 u324 3 ji noi ai03 n43 mp3 cow cow cow";

var regexWord=/\b[^\d\W]+\b/g	// Matches words without any digits (https://regex101.com)
var regexSingleChar=/[^\d\W]/g // Matches single char
var wordsArray=testString.match(regexWord).sort(); // Match function also converts String to Array, which will enable the sort function

// Initialize resultArray with 2 dimensions
var resultArray=[[wordsArray[0],1]];

// Helper function to process inner arrays    
function indexofArray(multiDimensionalArray, word) {
  for (var j = 0; j < multiDimensionalArray.length; j++) {
    var x = multiDimensionalArray[j].indexOf(word);
    //console.log(x);
    if (x > -1) {
      return j;
    }
  } //end for loop
  return -1;
}    

// Loop through original array and build up resultArray as 2-dimensional
for (var i=1; i< wordsArray.length; i++){
  var index = indexofArray(resultArray,wordsArray[i]);
  //console.log(index);
  if (index == -1){
    resultArray.push([wordsArray[i],1]);
  }
  else{
    resultArray[index][1]=resultArray[index][1]+1;
  }
}

// Display results with font sizes as direct correlation to count

//document.getElementById("Result").innerHTML = resultArray;  
function displayResult()
{
   var output = "<hr/>"; 
  //console.log(output);
   for (var k=0; k<resultArray.length; k++)
   {
     //console.log(output);
     //output += "Element " + k + " = " + resultArray[k][0] + "<br/>";
     output += `${resultArray[k][0]} ${resultArray[k][1]}<br/>`;
   }
  
   document.getElementById("Result").innerHTML = output;
}  

displayResult();  
  
}); //end self executing anonymous function

  
</script>

<input type="text" id="url" value="https://blog.kimconnect.com"></input>
<input type="button" id="button1" value="Process" onclick="processURL();"></input>
<input type="button" id="button2" value="Display" onclick="displayResult();"></input>
<div id="Result"></div> 

Output:

af 1
ais 1
ajoen 1
ajsd 1
aofi 1
aoi 1
cow 3
dfi 1
fas 1
i 1
ioa 1
iodf 1
ji 1
monkey 2
nfieoa 1
ni 1
noi 1