SEO Keyword Counter

I wrote a simple JavaScript SEO keyword counter. The user enters their SEO keyword in one field then enters their webpage text in a textarea field. It then calculates (in realtime, as the user types) how many times the keyword appears in the web page text. It also calculates the keyword density.

It works but probably is more complicated than it needs to be.

My code is as follows:



function myFunction() {

var numberOfTimesKeyword = 0;

// Prep the text ////////////////////////////////////
// Remove all characters but a-z AND 0-9 AND spaces
var pageText = textarea.value.replace(/[^\w\s]/gi, '');

// Remove double spaces
pageText = pageText.replace(/\s\s+/g, ' ');

// Trim beginning and ending spaces
pageText = pageText.trim();
// End: Prep the text ////////////////////////////////////

// Make textarea values into array
var pageTextArray = pageText.split(" ");

// Go through array and find out how many times the keyword appears
for(var i in pageTextArray) {

if (pageTextArray[i] == textfield.value) {
numberOfTimesKeyword++;
}

}

// Find keyword density
var keywordDensity = (numberOfTimesKeyword / pageTextArray.length) * 100;

if (numberOfTimesKeyword > 0) { // The keyword appears at least once
containsText.innerHTML = "The keyword appears " + numberOfTimesKeyword + " time(s).";
} else {
containsText.innerHTML = "Does not contain keyword.";
}

densityText.innerHTML = "Keyword Density ((# of times keyword appears / total words) * 100): " + Math.ceil(keywordDensity) + "%";
lengthText.innerHTML = "Array Length: " + pageTextArray.length;
}


SEO Keyword:

Webpage Text:

Does not contain keyword.

Keyword Density ((# of times keyword appears / total words) * 100): ---

Array Length: ---


• Split your function into two parts: one which counts a keyword within a paragraph of text, and one which updates your HTML elements. These are different concerns. One is a pure function, and one is concerned with mutating the DOM to present results.

• Prefer clear code to comments. Remember that comments are just noise and visual clutter when the code itself is clear (which yours was). When you do want to add comments for extra clarity, keep them brief.

• Prefer functional method chaning to temporary variables, when possible.

• Use clear names rather than implementation details: Word count rather than Array Length.

function keywordStats(text, keyword) {

var words = text.replace(/[^\w\s]/gi, '') // only words and spaces
.replace(/\s\s+/g, ' ') // remove double spaces
.trim()
.split(' '),
wordCnt = words.length,
keywordCnt = words.reduce((m,x) => m + (x == keyword) ? 1 : 0, 0),
density = (keywordCnt / wordCnt) * 100;

return { wordCnt, keywordCnt, density };
}

function updatePageStats() {
var stats = keywordStats(textarea.value, textfield.value),
setHTML = (id, html) => document.getElementById(id).innerHTML = html;

setHTML('containsText',
stats.keywordCnt
? "The keyword appears " + stats.keywordCnt + " time(s)."
: "Does not contain keyword.");

setHTML('densityText',
"Keyword Density ((# of times keyword appears / total words) * 100): " + Math.ceil(stats.density) + "%");

setHTML('lengthText',
"Total Word Count: " + stats.wordCnt);
}


SEO Keyword:

Webpage Text:

Does not contain keyword.

Keyword Density ((# of times keyword appears / total words) * 100): ---

Word Count: ---


StackExchange Code Review Q#128436, answer score: 2