title: Jquery - Replace selected html tags in string with value
body: <p>I'm working on a tinymce plugin where I need to convert some html into shortcodes. </p>
  
  <p>I have a string with html looking like this: </p>
  
  <pre><code> var content = '&lt;div class="row"&gt;&lt;div class="large-6 columns"&gt;&lt;p&gt;Content 1&lt;/p&gt;&lt;/div&gt;&lt;div class="large-6 columns"&gt;&lt;p&gt;Content 2&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Content between rows&lt;/p&gt;&lt;div class="row"&gt;&lt;div class="large-6 columns"&gt;&lt;p&gt;Content 3&lt;/p&gt;&lt;/div&gt;&lt;div class="large-6 columns"&gt;&lt;p&gt;Content 4&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
  </code></pre>
  
  <p>and want to "convert" the divs with the class row into [row]Content[/row], and divs with the class columns into [col]Content[/col]. So a every row would be outputtet like this: </p>
  
  <pre><code>[row]
       [col]Content[/col]
       [col]Content[/col]
  [/row]
  </code></pre>
  
  <p>So my final string after the replacement will look something like this: </p>
  
  <pre><code>'[row][col]&lt;p&gt;Content 1&lt;/p&gt;[/col][col]&lt;p&gt;Content 2&lt;/p&gt;[/col][/row]&lt;p&gt;Content between rows&lt;/p&gt;[row][col]&lt;p&gt;Content 3&lt;/p&gt;[/col][col]&lt;p&gt;Content 4&lt;/p&gt;[/col][/row]'
  </code></pre>
  
  <p><a href="https://jsfiddle.net/1rdfgvL1/1/" rel="nofollow">I have prepared a jsfiddle</a>, but dont know where to start on replacing the html tags with shortcode tags.</p>
  
  <p>I'm hoping that some jquery/javascript geniuses want to share their thoughts on how to solve this :)</p>