javascript - 进入选中的文本div

Question

我有一个关于选择文本以进入选定 div 的小问题。

我从 codepen.io 创建了这个演示.

在此演示中，您可以看到文本区域中有一个蓝色按钮和文本。当我选择选择此文本时，我想要。然后单击蓝色按钮，所选文本应如下所示 <div class="selected">Select this text.</div>单击蓝色按钮后。

我该怎么做。任何人都可以在这方面帮助我吗？

$(document).ready(function() {
  $("body").on("click", ".Bold", function() {
    // Code goes here...
  });
});

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #fafafa;
}
.container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  margin-top: 30px;
}
.editor {
  float: left;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.editButtons {
  width: 100%;
  float: left;
  margin-bottom: 15px;
}
.Bold {
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: blue;
  position: relative;
  max-width: 150px;
  text-align: center;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="editButtons">
    <div class="Bold">Add in Div</div>
  </div>
  <textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this:
    <div class="selected">Select this text.</div>
  </textarea>
</div>

Answer 1

我猜你正在寻找这个:

$(document).ready(function() {
   $("#btnSelect").click(function() {
      var $area = $("textarea.editor");
      var area = $area.get()[0];
      var s = area.selectionStart;
      var e = area.selectionEnd;
      if (s == e) return;
      var text = $area.val();
      var before = s > 0 ? text.substr(0, s) : "";
      var selection = text.substr(s, e - s);
      var after = e < text.length - 1 ? text.substr(e) : "";
      
      selection = "<div id=\"selected\">" + selection + "</div>";
      $area.val(before + selection + after);
      return false;
   });
});

html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   background-color: #fafafa;
}

.container {
   position: relative;
   width: 100%;
   max-width: 500px;
   margin: 0px auto;
   margin-top: 30px;
}

.editor {
   float: left;
   width: 100%;
   padding: 30px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

.editButtons {
   width: 100%;
   float: left;
   margin-bottom: 15px;
}

.editButtons a {
   text-decoration: none
}

#btnSelect {
   padding: 5px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   background-color: blue;
   position: relative;
   max-width: 150px;
   text-align: center;
   color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="editButtons">
      <a href="" id="btnSelect">Select</a>
   </div>
   <textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this: <div class="selected">Select this text.</div> </textarea>
</div>