JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Model</title>
    <link rel="stylesheet" href="style.css">
    
</head>

<body>
    Texte d'origine : <br><br>
    <textarea id="txta1" rows="3">Je exemple de mots manquants suis un texte pour faire des tests.</textarea>
    <br><br>
    
    Texte utilisateur : <br><br>
    <textarea id="txta2" rows="3">Ce sont des mots en trop , Je suis une textes pour faire des tests.</textarea>
    <br><br>

    Resultat de la comparaison :   

    <div id="res"><p>...</p></div>
    <br>
    <div id="msg"><p>...</p></div>

    <script src="lib.js"></script>
    <script src="js.js"></script>
</body>

</html>

CSS

body {
    background-color: black;
    color: white;
    font-family: Georgia; 
    font-size: 21px;  
   
}

textarea, #msg {
   background-color: black;
    color: white;
    font-family: Georgia; 
    font-size: 21px;
    width: calc(100% - 30px);
}


.mots_en_trop {
    color: greenyellow;
    /* visibility: hidden;
    display: none; */
}
.mots_differents {
    color: red;
}
.mots_manquants {
    color: blueviolet;
}

JavaScript

let div_res = document.getElementById("res")
let txta1 = document.getElementById("txta1")
let txta2 = document.getElementById("txta2")

txta1.addEventListener("keyup", handler)
txta2.addEventListener("keyup", handler)

function handler(e) {
  console.clear()
  const [resultat, liste_mots_txt1, liste_mots_txt2] = compare(txta1.value, txta2.value)
  display(resultat, liste_mots_txt1, liste_mots_txt2);
}

handler()

let div_msg = document.getElementById("msg")

div_res.addEventListener("mouseover", (e) => {
  let cible = e.target, text = ""

  switch (cible.className) {
    case "mots_differents":
      text = "<span class=" + cible.className + ">Ces mots sont erronés, les mots correctes sont: </span> <br>" + cible.dataset.insorrepl
      break;

    case "mots_en_trop":
      text = "<span class=" + cible.className + ">Ces mots sont en trop : à supprimer !"
      break;

    case "mots_correctes":
      text = "<span class=" + cible.className + ">Ces mots sont correctes."
      break;

    case "mots_manquants":
      text = "<span class=" + cible.className + ">Ces mots sont manquants : à rajouter !"
      break;
  }
  div_msg.firstChild.remove()
  div_msg.appendChild(document.createElement("p"))
  div_msg.insertAdjacentHTML("afterbegin", "<p>" + text + "</p>")
})

div_res.addEventListener("mouseout", (e) => {
  div_msg.firstChild.remove()
  div_msg.appendChild(document.createElement("p"))
  div_msg.insertAdjacentHTML("afterbegin", "")
})


function debug(resultat, liste_mots_txt1, liste_mots_txt2, i, prec, temp, statut_mots) {

  console.log("i", i, "prec", prec, "ch2.l", liste_mots_txt2.length, liste_mots_txt2.length - 1, "temp", JSON.stringify(temp));
  for (let i = 0, l = liste_mots_txt1.length; i < l; i++) {
    console.log(i, "-->", liste_mots_txt1[i], statut_mots[i])
  }
  console.log("statut_mots", statut_mots);
  console.log("resutat", resultat)
  console.log("resutat", JSON.stringify(resultat, null, 3))
}







function compare(txt1, txt2) {

  let...