Cara menambah julat teg pada perkataan tertentu dalam kawasan teks dengan mengklik pada perkataan itu (jika diklik)

Question

Apabila saya ingin menambah label pada perkataan dalam kawasan teks, label itu tidak diterima. Adakah terdapat sebarang cara untuk melabelkan teks dalam kawasan teks dengan mengklik pada perkataan yang saya mahu labelkan? Contohnya span tag

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

Answer 1

Klik dua kali pada teks dalam kawasan teks dan teks akan diserlahkan. Jika anda hanya mahu menggayakan, gunakan 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>

Sama ada gunakan

dan bukannya textarea,
atau
Gunakan Textarea sebagai tindanan DIV - ia akan mempunyai penanda yang diserlahkan

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

Di atas adalah bukti konsep, anda masih memerlukan JavaScript untuk mengklon teks ke dalam .highliter DIV 中，插入 元素子元素围绕所需的文本选择 - dan pastikan (jika perlu) bahawa DIV yang mendasari tatal selari dengan kawasan teks.

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>

Saya akan menyerahkan pilihan klik kepada pembaca.