如何使用 javascript/jQuery 重新选择 textarea 中的选定文本？答案

【问题标题】：How to re-select the selected text in textarea by using javascript/jQuery?如何使用 javascript/jQuery 重新选择 textarea 中的选定文本？
【发布时间】：2015-05-07 16:53:48
【问题描述】：

我正在使用 javascript 和 jQuery 来设计一个评论框。

我的页面有一个 textarea 和 3 个按钮（粗体、下划线和斜体）。如果用户在 textarea 中键入文本，选择并单击任何按钮，则所选文本应变为 bold、underlined 或 italicized（我有这个功能）。

我的问题是，在单击一个选择了文本的按钮后，虽然正确插入了 html 标签，但选择丢失了。也就是说，当我输入：“你好，我在这里。”时，选择“我在这里”并单击粗体按钮。 我在这里变为粗体，但如果我还想下划线或斜体，我必须重新选择文本。

所以，我的问题是：如何重新选择textarea 中的选定文本？

我试过myTextarea.select()，但这段代码会选择textarea的全部内容，而不仅仅是选择的文本。

更新：

这是我目前得到的：

var mystring = ""; // default string

/* Bold event */
function Bold()
{
  var startString;
  var endString;
  var startPos; // starting position
  var endPos; // ending position
  var selectedText;
  var temp = document.getElementById("myTextarea");

  // check if text is selected
  if(temp.selectionStart !== undefined)
  {
    startPos = temp.selectionStart;
    endPos = temp.selectionEnd;
    selectedText = temp.value.substring(startPos, endPos);
    startString = temp.value.substring(0, startPos);
    endString = temp.value.substring(endPos, temp.value.length);
  }

  $("#myTextarea").val(startString + "[B]" + selectedText + "[/B]" + endString); // rewrite textarea value

  if(mystring !== "") // check if default string is NOT null, return null if it's the first clicked
  {
    mystring = mystring.replace(selectedText, "<b>" + selectedText + "</b>");
  }
  else
  {
    mystring = startString + "<b>" + selectedText + "</b>" + endString;
  }

  // write to preview panel
  $("#preview").html(mystring);
  $("#myTextarea").focus();
}

当我在textarea 中选择“我在这里”并单击粗体按钮时，上面的代码会将[B] 和[/B] 插入到预览面板中的textarea 和<b> 标记中。

【问题讨论】：

您可以使用Selection/Range API 读取和修改当前选择。 developer.mozilla.org/en-US/docs/Web/API/Selection
如果您在文本区域中并且想要保留选择，我想您可以保存并重置 this.selectionStart 和 this.selectionEnd。 developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
如果您仍然需要帮助，请向我们展示您已经完成的工作。
@jcuenod 我已经更新了我的问题。请再读一遍并帮助我。谢谢。

标签： javascript jquery html

【解决方案1】：

要重新选择文本，您可以这样做：

temp.setSelectionRange(startPos, endPos + 6);

我添加了+ 6，因为您要插入 6 个新字符，所以我正在扩大选择范围以包括它们。您还可以将 3 添加到 startPos 和 endPos （并让字符包裹选择） - IMO 这是劣质的用户体验。

【讨论】：