时间戳

首页 > 解决方案 > 使用 Javascript 将标签 [start] [end] 包裹在 textarea 中的选定文本周围

javascript - 使用 Javascript 将标签 [start] [end] 包裹在 textarea 中的选定文本周围

问题描述

我有一个文本区域，用户可以在其中输入文本。使用按钮，他们应该能够使用自定义标签 [开始] [结束] 在此文本区域中包装选定的文本。

<button onclick="addTags();">Add Tags to selected Text</button>

<textarea id="user-input" name="user-input" rows="4" cols="50"></textarea>

示例：如果 textarea 中的文本是例如“1 2 3”并且用户标记“2”并单击按钮，则 textarea 中的结果应该是“1 [start]2[end] 3”。

我试图不让一段 javascript 工作，这将为我做这件事。

我玩过“window.getSelection()”。所以问题是：我的功能的正确方法是什么？

function addTags() {
...
}

标签： javascripthtml

解决方案

剪切文本：选择前、选择后、选择后。然后用标签重新组装。

document.getElementById("add-tag").onclick = () => {
  let txt = document.getElementById("user-input");
  const before = txt.value.substring(0, txt.selectionStart);
  const sel = txt.value.substring(txt.selectionStart, txt.selectionEnd);
  const after = txt.value.substring(txt.selectionEnd);
  txt.value = `${before}[start]${sel}[end]${after}`;
}; 
<button id="add-tag">Add Tags to selected Text</button>

<textarea id="user-input" name="user-input" rows="4" cols="50"></textarea>

TODO：处理未选择任何内容的情况。-

推荐阅读