title: How to create a regex that find's the beginning of a tag to the end of a tag unless already closed? (>) not (/>)
body: <p>I have created a function that takes in an html string as an argument, searches through the string for self-closing tags (<code>&lt;br /&gt;</code>, <code>&lt;img /&gt;</code>, <code>&lt;input /&gt;</code>, <code>&lt;col /&gt;</code>, <code>&lt;hr /&gt;</code>). I haven't worked with regular expressions much and I was wondering if the ones I have would work for all instances. I'm not asking for you to check each one but how do I create a regular expression that find's the beginning of a tag to the end of a tag unless it is already closed?</p>
  
  <p>e.g. Find <code>&lt;br&gt;</code> but not <code>&lt;br /&gt;</code></p>
  
  <p>side note: I know there are more self-closing tags but this is all I need in my case.</p>
  
  <p><strong>Update:</strong> I'm aware that it is valid for HTML5. I am sending the HTML string to a web service (I have no control over the web service) that takes the HTML string and converts it to xml. I was getting an error that the img tag was not closed. I am not taking what is returned to replace what is already in HTML.</p>
  
  <p><strong>Update 2:</strong> I have significantly reduced the amount of code by putting every regex into one.</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>var htmlStr = $("#content").html();
  
  // add self-closing tags to html string (i.e. if &lt;img&gt; convert to &lt;img /&gt;, if &lt;br&gt; convert to &lt;br /&gt;)
  function selfClosingTags(str) {
      // make sure self-closing tags aren't already closed (in regex [^\/]&gt;)
      var selfClosingRegex = /&lt;input[^/&gt;]*&gt;|&lt;br[^/&gt;]*&gt;|&lt;img\s+[^&gt;]*src="([^"]*)"[^/&gt;]*&gt;|&lt;col[^/&gt;]*&gt;|&lt;hr[^/&gt;]*&gt;/g;  // regex to find all self-closing tags
  
      // find all self closing tags and store in var
      var selfClosingTags = str.match(selfClosingRegex);
  
      var closingRegex = /[/]?&gt;/g; // closing regex match /&gt; or &gt;
  
      selfClosingRegex = /&lt;input[^/&gt;]*&gt;|&lt;br[^/&gt;]*&gt;|&lt;img\s+[^&gt;]*src="([^"]*)"[^/&gt;]*&gt;|&lt;col[^/&gt;]*&gt;|&lt;hr[^/&gt;]*&gt;/;       // regex to find first instance of self closing tag
  
      // loop through and close all self closing tags if not already closed
      for (var i = 0, len = selfClosingTags.length; i &lt; len; i++) {
          str = str.replace(selfClosingRegex, selfClosingTags[i].replace(closingRegex, " /&gt;"));
      }
  
      return str;
  }
  
  console.log(selfClosingTags(htmlStr));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="content"&gt;
    &lt;div&gt;&lt;img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Smiley face" width="100"&gt;&lt;/div&gt;
    &lt;br class="test"&gt;
    &lt;input type="text" name="username"&gt;
    &lt;p&gt;
      Test
    &lt;/p&gt;
    &lt;br class="test2"&gt;
    &lt;p&gt;
      Test 2
    &lt;/p&gt;
    &lt;input type="checkbox" name="ckbox"&gt;
    &lt;img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Smiley face" width="100"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>