Jquery - Replace selected html tags in string with value
<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>