Comment ajouter une plage de balises à un mot spécifique dans une zone de texte en cliquant sur ce mot si vous cliquez dessus

Question

Lorsque je souhaite ajouter une étiquette à un mot dans la zone de texte, l'étiquette n'est pas acceptée. Existe-t-il un moyen d'étiqueter du texte dans une zone de texte en cliquant sur le mot que je souhaite étiqueter ? Par exemple la balise span

<label>
  <textarea class="string-example" name="textarea3" id="textarea3" cols="122" rows="17">Lorem ipsum dolor sit amet...</textarea>
</label>

Answer 1

Double-cliquez sur le texte dans la zone de texte et le texte sera mis en surbrillance. Si vous voulez juste styliser, utilisez CSS : ::selection

textarea::selection {
  color: white;
  background-color: black;
}

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit ipsum. Eaque, facere architecto. Ipsum quas, modi impedit veritatis earum sunt quo reiciendis. Hic, sapiente earum fuga accusamus qui eos itaque provident! Eaque, ipsum in.</textarea>

Soit utilisez

au lieu de textarea,
ou
Utilisez Textarea comme superposition DIV - le balisage sera mis en surbrillance

.markable {
  display: inline-block;
  position: relative;
}

.markable>* {
  all: unset;
  outline: 1px solid #999;
  vertical-align: top;
  font: 16px/1.4 monospace;
}

.markable div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: transparent;
}

.markable textarea {
  position: relative;
}

<div class="markable">
  <div>Lorem <mark>ipsum</mark> dolor sit amet...</div>
  <textarea>Lorem ipsum dolor sit amet...</textarea>
</div>

Ce qui précède est une preuve de concept, vous aurez toujours besoin de JavaScript pour cloner le texte dans .highliter DIV 中，插入 元素子元素围绕所需的文本选择 - et assurez-vous (si nécessaire) que le DIV sous-jacent défile de manière synchronisée avec la zone de texte.

const search = "ipsum";

const regEsc = (str) => str.replace(/[/\-\^$*+?.()|[\]{}]/g, '\$&');

const markable = (elMarkable) => {
  const elDiv = elMarkable.querySelector("div");
  const elTxt = elMarkable.querySelector("textarea");
  const updateScroll = () => {
    elDiv.scrollTop = elTxt.scrollTop;
  };
  const updateMark = () => {
    const val = elTxt.value;
    const markedVal = val.replace(new RegExp(`\b${regEsc(search)}\b`, "gi"), `<mark>$&</mark>`);
    elDiv.setHTML(markedVal);
  };
  elTxt.addEventListener("scroll", updateScroll);
  elTxt.addEventListener("input", updateScroll);
  elTxt.addEventListener("input", updateMark);
  
  // Init:
  updateScroll();
  updateMark();
};

document.querySelectorAll(".markable").forEach(markable);

.markable {
  display: inline-block;
  position: relative;
}

.markable>* {
  all: unset;
  outline: 1px solid #999;
  vertical-align: top;
  font: 16px/1.4 monospace;
}

.markable div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: transparent;
  overflow: auto;
}

.markable textarea {
  position: relative;
}

<p>Edit the text in textarea below. The string to be highlighted is "ipsum" (case insensitive)</p>
<div class="markable">
  <div></div>
  <textarea  name="textarea3" cols="40" rows="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit ipsum. Eaque, facere architecto. Ipsum quas, modi impedit veritatis earum sunt quo reiciendis. Hic, sapiente earum fuga accusamus qui eos itaque provident! Eaque, ipsum in.</textarea>
</div>

Je laisse la sélection des clics au lecteur.