如何通过单击该单词（如果单击）将标签范围添加到文本区域中的特定单词中

Question

当我想为文本区域中的单词添加标签时，该标签不被接受。有什么方法可以通过单击我要添加标签的单词来为文本区域中的文本添加标签吗？例如span标签

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




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