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

Question

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

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

我的问题是，单击带有选定文本的按钮后，尽管正确插入了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>标签到预览面板。

Answer 1

要重新选择文本，您可以执行以下操作：

temp.setSelectionRange(startPos, endPos + 6);

我添加了+ 6因为您要插入6个新字符，因此我正在扩展选择范围以包括它们。 您还可以在startPos和endPos添加3（并让字符包装选择内容） endPos这是次于UX的明智选择。