DevStud DevStud - 2 months ago 8
CSS Question

Get into the selected text div

I have one mini question about select text to get in to a selected div.

I have created this demo from codepen.io .

In this demo you can see there are one blue button and text in a textarea. I want when i select Select this text. and click the blue button it the selected text should be like this

<div class="selected">Select this text.</div>
after clicking blue button.

How can I do that. Anyone can help me in this regard ?



$(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

I guess you're looking for this:

$(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>