So fügen Sie einem bestimmten Wort in einem Textbereich einen Tag-Bereich hinzu, indem Sie auf dieses Wort klicken (falls angeklickt)

Question

Wenn ich einem Wort im Textbereich eine Beschriftung hinzufügen möchte, wird die Beschriftung nicht akzeptiert. Gibt es eine Möglichkeit, Text in einem Textbereich zu kennzeichnen, indem ich auf das Wort klicke, das ich kennzeichnen möchte? Zum Beispiel Span-Tag

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

P粉787820396 · Answer

双击文本区域中的文本，该文本将突出显示。如果您只想设置样式，请使用 CSS： ::selection

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

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，

或

使用 Textarea 作为 DIV 覆盖层 - 它将具有突出显示的标记



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

  Lorem ipsum dolor sit amet...
  Lorem ipsum dolor sit amet...




以上是概念证明，您仍然需要 JavaScript 才能将文本克隆到 .highliter DIV 中，插入  元素子元素围绕所需的文本选择 - 并确保（如果需要）底层 DIV 与文本区域同步滚动。



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"), `$&`);
    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;
}
Edit the text in textarea below. The string to be highlighted is "ipsum" (case insensitive)

  
  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.




我将把单击选择留给读者。