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

Question

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

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

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

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

我正在尝试不让 javascript 工作，这将为我做这件事。

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

function addTags() {
...
}

Answer 1

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

 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：处理未选择任何内容的情况。-