Malheureusement, vous ne pouvez pas ajouter de balisage dans une zone de texte , mais voici une idée que vous pouvez prendre comme approche de départ, elle vient de ce lien . L'approche sera basée sur ceci:

L'idée de base est de positionner soigneusement un

derrière la . Ensuite, JavaScript sera utilisé pour copier tout texte saisi dans la vers le

. Un peu plus de JavaScript fera défiler les deux éléments comme un seul. Avec tout parfaitement aligné, nous pouvons ajouter du balisage à l'intérieur du

pour donner des couleurs à certains mots particuliers, et nous allons définir la couleur du texte sur transparent sur la , complétant l'illusion.

Implémentation de base:

<div class="container">
  <div class="backdrop">
    <div class="custom-area">
        <!-- Cloned text with colors will go here -->
    </div>
  </div>
  <textarea id="myTextArea"></textarea>
</div>

.backdrop, #myTextArea {
  font: 12px 'Open Sans', sans-serif;
  letter-spacing: 1px;
  width: 300px;
  height: 100px;
}

#myTextArea {
  margin: 0;
  position: absolute;
  border-radius: 0;
  background-color: transparent;
  color: transparent;
  caret-color: #555555;
  z-index: 2;
  resize: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid transparent;
  overflow: auto;
  pointer-events: none;
}

.custom-area {
  white-space: pre-wrap;
  word-wrap: break-word;
}

// Initialization.

const colorMap = {"apple": "red", "market": "green", "banana": "orange"};
let textArea = document.getElementById("myTextArea");
let customArea = document.querySelector(".custom-area");
let backdrop = document.querySelector(".backdrop");

// Event listeners.

textArea.addEventListener("input", function()
{
    customArea.innerHTML = applyColors(textArea.value);
});

textArea.addEventListener("scroll", function()
{
    backdrop.scrollTop = textArea.scrollTop;
});

function applyColors(text)
{
    let re = new RegExp(Object.keys(colorMap).join("|"), "gi");

    return text.replace(re, function(m)
    {
        let c = colorMap[m.toLowerCase()];
        return `<spam style="color:${c}">${m}</spam>`;
    });
}

Notez qu'il ne s'agit que d'une approche de base pour comprendre l'idée sous-jacente. Mais avec un peu de travail dessus, vous pourrez peut-être obtenir une version généralisée. Par exemple, à l'heure actuelle, la zone de texte ne peut pas être redimensionnable. Mais peut-être pouvez-vous détecter cet événement et redéfinir le fond de manière dynamique.