title: append query param to img src url in a html string
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="text-align: center"&gt;&lt;img alt="Editor photo" class="fr-fir fr-dii fr-draggable" src="/assets/editor/pages/B/editor-photo-3eeba30c6186df86c859d6d14e9b02d0.jpg" width="200"&gt;&lt;/p&gt;
  
  &lt;p&gt;Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.&lt;/p&gt;
  
  &lt;p&gt;Its complete &lt;a href="/wysiwyg-editor/docs" title="Documentation"&gt;documentation&lt;/a&gt;, specially designed &lt;a href="#frameworks" title="Frameworks"&gt;framework plugins&lt;/a&gt; and &lt;a href="/wysiwyg-editor/examples" title="Examples"&gt;tons of examples&lt;/a&gt; make it easy to integrate. We&amp;#39;re continuously&amp;nbsp;&lt;/p&gt;
  
  &lt;p&gt;working to add in new features and take the Javascript web WYSIWYG editing capabilities beyond its current limits.&lt;/p&gt;
  
  &lt;p&gt;
   &lt;br&gt;
  &lt;/p&gt;
  
  &lt;p&gt;&lt;img alt="Editor photo" class="fr-dii fr-draggable fr-fil" src="/assets/editor/pages/B/editor-photo-3eeba30c6186df86c859d6d14e9b02d0.jpg" width="200"&gt;&lt;/p&gt;
  
  &lt;p&gt;
   &lt;br&gt;
  &lt;/p&gt;
  
  &lt;p&gt;&lt;span class="fr-video fr-dvi fr-draggable" contenteditable="false" style=""&gt;&lt;video controls=""&gt;&lt;source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"&gt;&lt;source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"&gt;&lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;&lt;source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"&gt;&lt;/video&gt;&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm looking for  script to append  query param to all image, video src url in html string and this need to be done before rendering to the DOM. 
  Input pattern  is similar to what i have shared. 
  Query param i'm trying to attach is a token which  will be used to validate if image can be accessed or not.</p>
  
  <p>I'm using <code>nodejs</code> and <code>angular2</code> frameworks</p>
  
  <h3>Jquery Approach</h3>
  
  <pre><code>var wrapHtmlString =  `&lt;div&gt;${htmlstring}&lt;/div&gt;`;
  var pageHtml = $(wrapHtmlString);
  
  pageHtml.find('[src]').each(function () {
      var rawImageSrc = $(this).attr('src');
  
      var tokenizedImageSrc = rawImageSrc+'?token=randomtoken';
      $(this).attr('src', tokenizedImageSrc);
  });
  
  var formattedHtmlString = pageHtml.html();
  </code></pre>