I was able to show the text inputted; I was able to count the words on the said text. But right now, I want to show all the word’s density. I tried following what this website says: https://www.cssscript.com/word-density-counter/ I was able to download the density.js. But I don’t know how to connect my code to this downloaded file (the STEP 2 on the website). Here’s my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Word Counter</title>
</head>
<body>
<div id="input-page">
<h1>Word Counter</h1>
<form action="">
<textarea id="text" type="text" rows="22" cols="60"></textarea>
<br />
</form>
<button onclick="displayText()">COUNT</button>
</div>
<div id="count-page" style="display: none;">
<h1>Your Text:</h1>
<p id="display-text"></p>
<div id="word-count"></div>
</div>
</div>
</body>
<script src="https://stackoverflow.com/app.js"></script>
<script src="density.js"></script>
</html>
app.js:
const displayText = () => {
const inputPage = document.getElementById("input-page");
const countPage = document.getElementById("count-page");
const text = document.getElementById("text");
const textValue = text.value;
if (text.value !== "") { // normal flow will continue if the text-area is not empty
inputPage.style.display = "none";
document.getElementById("display-text").innerText = textValue;
countPage.style.display = "block";
} else { // if the text-area is empty, it will issue a warning.
alert("Please enter some text first.")
}
const countWords = (str) => {
return str.split(" ").length;
};
const wordCount = (countWords(textValue));
const renderWordCount = () => {
const wordCountDiv = document.getElementById("word-count");
wordCountDiv.innerHTML = "<h1> Words Counted: " + wordCount + "</h1>";
};
renderWordCount();
};
This is the downloaded density.js:
class density {
static defaults() {
return {
words: 1,
characters: 0,
stopwords: (),
filter: ("toText", "toAlpha", "toLowercase", "stripWhitespace"),
selected: ()
};
}
static set(content) {
this.add(content);
this.o.filter.forEach(filter => {
switch (filter) {
case "toText":
this.toText();
break;
case "toAlpha":
this.toAlpha();
break;
case "toLowercase":
this.toLowercase();
break;
case "stripWhitespace":
this.stripWhitespace();
break;
}
});
if (this.o.selected.length > 0) {
this.processSelected();
} else {
this.process();
}
}
static setOptions(options) {
this.o = Object.assign({}, this.defaults(), options);
}
static getUnsorted(content, options) {
this.setOptions(options);
this.set(content);
return this.unsorted;
}
static getSorted(content, options = {}) {
this.setOptions(options);
this.set(content);
this.sort();
return this.sorted;
}
static sort() {
// Put it back as array to get it sortable by occurrences
let i = 0;
let array_results = ();
for (let collection in this.unsorted) {
array_results(i) = {
count: this.unsorted(collection),
word: collection
};
i++;
}
this.sorted = array_results.sort((a, b) => b.count - a.count);
}
static processSelected() {
let object_unsorted = {};
this.o.selected.forEach(phrase => {
object_unsorted(phrase) = vitimusOccurrences(
" " + this.content + " ",
" " + phrase + " ",
true
);
});
this.unsorted = object_unsorted;
}
static process() {
let array = this.content.split(" ");
let object_unsorted = {};
let array_words = ();
// Set x number of words to array
for (let i = 0; i < array.length; i++) {
let collection = "";
// Loop limit to set x number of words
for (let j = 0; j < this.o.words; j++) {
if (typeof array(i + j) === "undefined") continue;
if (j > 0) collection += " ";
collection += array(i + j);
}
if (this.o.stopwords.includes(collection)) continue;
if (collection.length <= this.o.characters) continue;
array_words(i) = collection;
}
// Put the words as key and count the words occurrences
array_words.forEach(item => {
object_unsorted(item) =
typeof object_unsorted(item) === "undefined"
? 1
: object_unsorted(item) + 1;
});
this.unsorted = object_unsorted;
}
static add(content) {
this.content = content;
}
static toText() {
let div = document.createElement("div");
div.innerHTML = this.content;
let text = div.textContent || div.innerText || "";
this.content = text.replace(/(rn|n|r)/gm, " ");
}
static toLowercase() {
this.content = this.content.toLowerCase();
}
static toAlpha() {
this.content = this.content.replace(/(^a-zA-Z0-9À-žs)/g, "");
}
static stripWhitespace() {
this.content = this.content.replace(/s+/g, " ").trim();
}
}
function vitimusOccurrences(string, subString, allowOverlapping) {
string += "";
subString += "";
if (subString.length <= 0) return string.length + 1;
var n = 0,
pos = 0,
step = allowOverlapping ? 1 : subString.length;
while (true) {
pos = string.indexOf(subString, pos);
if (pos >= 0) {
++n;
pos += step;
} else break;
}
return n;
}
