从textarea中获取具有位置的选定字符串，尽管它多次存在

问题描述

function addURL(e) {
    var n = document.selection ? document.selection.createrange().text : e.value.substring(e.selectionStart,e.selectionEnd);
    var a = n + '[link]';
    e.value = e.value.replace(n,a);
}

<input type="button" value="Add URL" onclick="addURL(text)">

<br><br>

<textarea id="text">This is a test. This is a test. This is a test.</textarea>

请运行我的代码片段。选择/激活/突出显示文本区域中的任何单词/字符串，然后按 Add link 按钮。

如果你例如在 textarea 中选择 test 并按下 Add link 按钮，它会将 [link] 附加到 test。

这很有效，但前提是文本区域中只有一个 test：对第二句中的 test 再试一次。您会看到，[link] 将添加到 textarea 中的第一个 test，而不是添加到选定的那个。

我该如何解决？

解决方法

那是因为您使用 replace 将仅替换所有匹配值的第一个实例。您需要使用 substring

function addURL(e) {
  var n = window.selection ? window.selection.createRange().text : e.value.substring(e.selectionStart,e.selectionEnd);
  var a = n + '[link]';
  e.value = e.value.substring(0,e.selectionStart) + a + e.value.substring(e.selectionEnd,e.value.length);
}

#text {
  width: 150px;
  height: 50px;
}

<input type="button" value="Add URL" onclick="addURL(text)">

<br><br>

<textarea id="text">This is a test. This is a test. This is a test.</textarea>