How to add a tag range to a specific word in a textarea by clicking on that word (if clicked)

Question

When I want to add a label to a word in the text area, the label is not accepted. Is there any way to label text in a textarea by clicking on the word I want to label? For example span tag

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

Answer 1

Double-click the text in the text area and the text will be highlighted. If you just want to style, use 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>

Either use

instead of textarea,
or
Use Textarea as DIV overlay - it will have highlighted tag

.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>

The above is a proof of concept, you will still need JavaScript to clone text into a .highliter DIV, inserting elements child elements around the desired text selection - and make sure (if necessary) that the underlying DIV scrolls in sync with the text area.

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>

I'll leave the click selection to the reader.