title: Why is text in between bold tags not rendered bold?
body: <p>I am building a web tool for authors that follows a format we need for our backend. I didn't like a number of pre-made solutions for rich text editors as they were having way more features than I would need so I decided to parse my text through a function to detect bold using ** in the text.</p>
  
  <p>I came across a regex solution here and when I used it, it detected the bold text and substituted * for <code>&lt;b&gt;</code> but displayed the tags instead of making the text between <code>&lt;b&gt;</code> and <code>&lt;/b&gt;</code> bold.</p>
  
  <p>I am new to HTML, CSS and JS so probably this is a simple error, but I couldn't find out how to deal with it myself...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Tracks number of current textareas i.e. paragraphs
  var element_counter = 0;
  
  // Add Paragraph on button press
  document.getElementById("addParagraph").addEventListener("click", function() {
     var textarea = document.createElement("textarea");
     var text = "Here goes your new paragraph.";
     var node = document.createTextNode(text);
     textarea.setAttribute("id", element_counter);
     //textarea.setAttribute("class", "flow-text");
     //textarea.setAttribute("oninput", "this.style.height = '';this.style.height = this.scrollHeight + 'px'");
     textarea.append(node);
     var section = document.getElementById("editor");
     section.appendChild(textarea);
     element_counter++;
     reloadPreview();
  });
  
  // Add Image on button press
  document.getElementById("addImage").addEventListener("click", function() {
     var image = document.createElement("input");
     image.setAttribute("type", "file");
     image.setAttribute("id", element_counter);
     image.setAttribute("accept", "image/*");
     image.setAttribute("class", "file-field input-field");
     var section = document.getElementById("editor");
     section.appendChild(image);
     element_counter++;
  });
  
  // Remove paragraph with confirmation step on button press
  var confirm = false;
  document.getElementById("removeLastItem").addEventListener("click", function() {
     // Ensure there is an object to remove and wait for confirmation
     if (document.getElementById(element_counter-1) != null) {
        if (confirm === false) {
        confirm = true;
        document.getElementById("removeLastItem").innerHTML = "Confirm";
        } else {
           document.getElementById("removeLastItem").innerHTML = "Remove last item";
           var element = document.getElementById(element_counter-1);
           element.parentNode.removeChild(element);
           confirm = false;
           element_counter--;
           reloadPreview();
        }
     }
  });
  
  // Remove all with confirmation step on button press
  var confirmRemoveAll = false;
  document.getElementById("removeAll").addEventListener("click", function() {
     // Ensure there is an object to remove and wait for confirmation
     if (document.getElementById(element_counter-1) != null) {
        if (confirmRemoveAll === false) {
           confirmRemoveAll = true;
           document.getElementById("removeAll").innerHTML = "Confirm";
        } else {
           document.getElementById("removeAll").innerHTML = "Remove all";
           var element = document.getElementById("editor").innerHTML = ""
           confirmRemoveAll = false;
           element_counter = 0;
           reloadPreview();
        }
     }
  });
  
  // Preview on button press
  document.getElementById("previewButton").addEventListener("click", reloadPreview);
  
  // Preview current document status
  function reloadPreview() {
     // Clear previous preview
     document.getElementById("preview").innerHTML = "";
  
     // Add elements iteratively
     var section = document.getElementById("preview");
     const id = "preview";
  
     for (var counter = 0; counter &lt; element_counter; counter++) {
        var type = document.getElementById(counter).nodeName;
        // If text element
        if (type === "TEXTAREA") {
           var paragraph = document.createElement("p");
           var text = document.getElementById(counter).value;
           var richtext = boldText(text);
           paragraph.setAttribute("id", id + counter);
           paragraph.setAttribute("class", "flow-text");
           paragraph.innerHTML = richtext;
           section.appendChild(paragraph);
        }
        
        // If image element
        if (type === "INPUT") {
           // This weird structure allows to render item by item into preview and not mix up the order as onload is otherwise too slow
           (function() {
              var file = document.getElementById(counter).files[0];
              var reader = new FileReader();
              var image = document.createElement("img");
              image.setAttribute("id", id + counter);
              image.setAttribute("class", "materialboxed responsive-img");
              section.appendChild(image);
  
              reader.onload = function(e) {
                 image.setAttribute("src", e.target.result);
              }
              reader.readAsDataURL(file);
           }())
        }
     }
  }
  
  function boldText(text){
     var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
     var richtext = text.replace(bold, '&lt;b&gt;$1&lt;/b&gt;');            
     return richtext;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  
      &lt;title&gt;Climate Science&lt;/title&gt;
      &lt;!--Used to unify web page appearance and this preview appearance--&gt;
      &lt;link type="text/css" href="/css/materialize.css" rel="stylesheet"&gt;
      &lt;link type="text/css" href="/css/styles.css" rel="stylesheet"&gt; 
      &lt;link type="text/css" href="/css/mystyles.css" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;script href="text/javascript" src="/js/materialize.js"&gt;&lt;/script&gt;
  
      &lt;link rel="manifest" href="/manifest.json"&gt;
  
      &lt;!-- IOS Support --&gt;
      &lt;link rel="apple-touch-icon" href="/img/icons/icon-96x96.png"&gt;
      &lt;link rel="apple-touch-icon" href="/img/icons/icon-152x152.png"&gt;
      &lt;meta name="apple-mobile-web-app-status-bar" content="#5368ff"&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="default"&gt;
  
      &lt;meta name="theme-color" content="#5368ff"&gt;
  &lt;/head&gt;
  
  
  
  &lt;body class="grey lighten-5"&gt;
  
      &lt;header&gt;
          &lt;!-- top nav --&gt;
          &lt;div class="navbar-fixed"&gt;
              &lt;nav class="z-depth-2"&gt;
                  &lt;div class="nav-wrapper"&gt;
                      &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
                          &lt;li&gt;&lt;a href="pages/test" class="waves-effect"&gt;Log out&lt;/a&gt;&lt;/li&gt; &lt;!--TODO needed?--&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div class="container"&gt;
  
          &lt;h3&gt;Editor Area&lt;/h3&gt;
  
          &lt;p&gt;&lt;b&gt;Linebreaks&lt;/b&gt; within paragraphs are currently &lt;b&gt;ignored&lt;/b&gt; to follow our internal database format.&lt;/p&gt; &lt;!--TODO check if accurate, \n possible integratable?--&gt;
          &lt;!--
          &lt;h6&gt;Safety switch&lt;/h6&gt;
          &lt;div id="safetyswitch" class="switch"&gt;
              &lt;label&gt;
              Off
              &lt;input type="checkbox"&gt;
              &lt;span class="lever"&gt;&lt;/span&gt;
              On
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;p&gt;You can only remove paragraphs while the switch is deactivated!&lt;/p&gt;
  
          &lt;h6&gt;Auto-preview&lt;/h6&gt;
          &lt;div id="safetyswitch" class="switch"&gt;
              &lt;label&gt;
              Off
              &lt;input type="checkbox"&gt;
              &lt;span class="lever"&gt;&lt;/span&gt;
              On
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;p&gt;The preview will load automatically while you edit your text&lt;/p&gt;
          &lt;br&gt;
          --&gt;
  
  
          &lt;button id="addParagraph" class="waves-effect waves-light btn"&gt;Add new paragraph&lt;/button&gt;
          &lt;button id="addImage" class="waves-effect waves-light btn"&gt;Add new image&lt;/button&gt;
          &lt;button id="removeLastItem" class="waves-effect waves-light btn"&gt;Remove last item&lt;/button&gt;
          &lt;button id="removeAll" class="waves-effect waves-light btn"&gt;Remove all&lt;/button&gt;
          
          &lt;div id="editor"&gt;
  
              &lt;!-- Here go all the content the author creates--&gt;
  
          &lt;/div&gt;
  
          &lt;button id="previewButton" class="waves-effect waves-light btn"&gt;Update Preview&lt;/button&gt;
  
          &lt;h3&gt;Preview&lt;/h3&gt;
  
          &lt;div id="preview"&gt;
  
              &lt;!-- Here will be the preview elements when clicking the button --&gt;
  
  
  
              &lt;!--
              &lt;form action="#"&gt;
                  &lt;p class="flow-text"&gt;What changes do you think we're already experiencing? Tap as many that apply&lt;/p&gt;
                  &lt;p&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox" /&gt;
                          &lt;span&gt;Raising Sea Levels&lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox" /&gt;
                          &lt;span&gt;Fewer Heat Waves&lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox" /&gt;
                          &lt;span&gt;Worse Droughts&lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox" /&gt;
                          &lt;span&gt;Hotter heat waves&lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/p&gt;
  
                  &lt;button class="btn waves-effect waves-light btn-large" type="submit" name="action"&gt;Submit
                      &lt;i class="material-icons right"&gt;send&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/form&gt;
              --&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script href="text/javascript" src="js/preview.js"&gt;&lt;/script&gt;
      &lt;script href="text/javascript" src="js/ui.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>