title: HTML string replace tags using jQuery
body: <p>I have HTML string which contains various elements.
  Consider following is the HTML string - </p>
  
  <pre><code>var contentHTML = '&lt;p&gt;Some random string&lt;/p&gt;&lt;p&gt;&lt;img src="xyz.jpg" style="width: 100%;"&gt;&lt;span some style&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 16.8px;"&gt;&lt;b&gt;Ingredients&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;Again some string&lt;/p&gt;&lt;p&gt;&lt;img src="xyz.jpg" style="width: 100%;"&gt;&lt;/p&gt;';
  </code></pre>
  
  <p>My requirement is to get tag before and after each <code>img</code> tag. If tag before <code>img</code> tag is <code>p</code> tag, then replace it with <code>&lt;figure&gt;</code> and closing <code>&lt;/p&gt;</code> with <code>&lt;/figure&gt;</code>.</p>
  
  <p>I tried looping through <code>img</code> tag and able to get image details perfectly.</p>
  
  <p>How can replace elements before and after image. </p>
  
  <pre><code>$(this.content).find('img').each(function() {
      console.log($(this).prev());
      console.log($(this).attr('src'));
  });
  </code></pre>
  
  <p>String I require - </p>
  
  <pre><code>var contentHTML = '&lt;p&gt;Some random string&lt;/p&gt;&lt;figure&gt;&lt;img src="xyz.jpg" style="width: 100%;"&gt;&lt;span some style&gt;&lt;/span&gt;&lt;/figure&gt;&lt;p&gt;&lt;span style="font-size: 16.8px;"&gt;&lt;b&gt;Ingredients&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;Again some string&lt;/p&gt;&lt;figure&gt;&lt;img src="xyz.jpg" style="width: 100%;"&gt;&lt;/figure&gt;';
  </code></pre>