javascript – How to have density js file work with my code?


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;
}