title: Using symbols in an input to format text
body: <p>I'm struggling to find a solution which allows a user to input in a input field, however they can style their text when it displays after the input for was submitted.</p>
  <p>For example, a user could enter <code>**message**</code> into the input field, JavaScript can detect that the <code>**</code> on the start of the word/sentence and make this text <strong>bold</strong>. Essentially StackOverflow does this shown in the image below:</p>
  <p><a href="https://i.stack.imgur.com/B0M2d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B0M2d.png" alt="Stackoverflow example of styling input" /></a></p>
  <p>However my code works, but barely. For instance, the user can input their text, and format it in the input with symbols types such as:</p>
  <ul>
  <li><code>**</code> = <strong>Bold</strong></li>
  <li><code>*</code> = <em>Italics</em></li>
  <li><code>__</code> = Underlined, etc</li>
  </ul>
  <p>Below is my attempt:</p>
  <pre class="lang-js prettyprint-override"><code>    if (msg.includes('**')) {
          msg = msg.replace(&quot;**&quot;, &quot;&quot;);
          msg = msg.replace(&quot;**&quot;, &quot;&quot;);
          msg = `&lt;b&gt;${msg}&lt;/b&gt;`
      }
      if (msg.includes('__')) {
          msg = msg.replace(&quot;__&quot;, &quot;&quot;);
          msg = msg.replace(&quot;__&quot;, &quot;&quot;);
          msg = `&lt;u&gt;${msg}&lt;/u&gt;`
      }
  </code></pre>
  <p>However this code would not work and mean a user could just enter <code>**message</code> instead of using it on <code>point a</code> to <code>point b</code> of the text they want to style.</p>
  <p>Also, this code would make the whole text the format anyway, I just would like only the text within the formatted symbols. Could anyone please provide a solution?</p>
  <p><strong>TL;DR</strong></p>
  <p>Simply a user can input their text into an input field, however they may want to format it, let's say <strong>bold</strong>, the user within the input can have their text:</p>
  <p>User text: <code>This is a **desired** example</code></p>
  <p>Display on page as: This is a <strong>desired</strong> example</p>
  <p>However, my currently non-functioning code applies the format to the whole text instead of the selected within the symbols:</p>
  <p>User text: <code>This is a **bad** example</code></p>
  <p>Display on page as: <strong>This is a bad example</strong></p>