title: How to get the before and after of selected text input
body: <p>I am trying to implement <strong>Bold</strong> and <em>Italic</em> in Jquery with stars and underscores (like in whatsapp). By using <a href="https://github.com/madapaja/jquery.selection" rel="nofollow noreferrer">Madapaja's Selection Library</a>, I can add stars or underscores, but I cannot figure out how to remove stars or underscores if exists before and after the selected text. I know there are duplicate questions but I want to achieve this by using the library since it has the cross-browser support.</p>
  
  <p>I am adding stars like this:</p>
  
  <pre><code>$(document).ready(function () {
      $('#boldButton').click(function () {
  
          var selection = $("#inputQuestion").selection();
  
          if (selection.trim()) {//not empty or not whitespace
              $('#inputQuestion')
              .selection('insert', { text: '*', mode: 'before' })
              .selection('insert', { text: '*', mode: 'after' });
          }
      });
  });
  </code></pre>
  
  <p>to this html:</p>
  
  <pre><code>&lt;button id="boldButton" type="button" class="btn btn-default"&gt;&lt;b&gt;B&lt;/b&gt;&lt;/button&gt;
  &lt;textarea class="form-control" rows="10" id="inputQuestion"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>You can examine the <a href="https://github.com/madapaja/jquery.selection/wiki/API" rel="nofollow noreferrer">wiki</a> and the <a href="https://github.com/madapaja/jquery.selection/blob/master/src/jquery.selection.js" rel="nofollow noreferrer">source code</a></p>
  
  <p>Any help or any other methods will be appreciated!</p>
  
  <p><strong>Update</strong>:
  With dpren's answer, I achieved like this:</p>
  
  <pre><code>$(document).ready(function () {
      $('#boldButton').click(function () {
  
          var selection = $("#inputQuestion").selection();
          var selectedPos = $("#inputQuestion").selection('getPos');
  
          if (selection.trim()) {//not empty or not whitespace
              var before = $('#inputQuestion')
                  .selection('setPos', { start: selectedPos.start - 1, end: selectedPos.start })
                  .selection();
  
              var after = $('#inputQuestion')
                  .selection('setPos', { start: selectedPos.end, end: selectedPos.end + 1 })
                  .selection();
  
              if (before == '*' &amp;&amp; after == '*') { //already bold -&gt; remove stars
                  var before = $('#inputQuestion')
                      .selection('setPos', { start: selectedPos.start - 1, end: selectedPos.start })
                      .selection();
  
                  $('#inputQuestion').selection('replace', { text: '' });
  
                  var after = $('#inputSoru') //since we remove 'before', positions will decrese by one
                      .selection('setPos', { start: selectedPos.end-1, end: selectedPos.end })
                      .selection();
  
                  $('#inputSoru').selection('replace', { text: ''});
  
              } else { // not bold -&gt; make it bold
                  $('#inputQuestion') //get back to user's selection
                  .selection('setPos', { start: selectedPos.start, end: selectedPos.end })
                  .selection();
  
                  $('#inputSoru')
                      .selection('insert', { text: '*', mode: 'before' })
                      .selection('insert', { text: '*', mode: 'after' });
              }
          }
      });
  });
  </code></pre>
  
  <p>However, I think this code has repititions. Is there a way to achive this by editing selection library?</p>