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

Question

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>

请运行我的代码片段。 Select/activate/highlight 文本区域中的任何 word/string 并按 Add link 按钮。

如果你select test 在文本区域中并按下 Add link 按钮，它会将 [link] 附加到 test.

此方法运行良好，但前提是文本区域中只有一个 test：使用第二句中的 test 再试一次。您会看到，[link] 将被添加到文本区域中的第一个 test 而不是添加到 selected 的

我该如何解决？

Answer 1

那是因为您使用 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>

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

Get the selected string with position from textarea although it exists multiple times

html

javascript

substring

selection

textselection