将查询参数附加到html字符串中的img src url

Question

 <p style="text-align: center"><img alt="Editor photo" class="fr-fir fr-dii fr-draggable" src="/assets/editor/pages/B/editor-photo-3eeba30c6186df86c859d6d14e9b02d0.jpg" width="200"></p> <p>Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.</p> <p>Its complete <a href="/wysiwyg-editor/docs" title="Documentation">documentation</a>, specially designed <a href="#frameworks" title="Frameworks">framework plugins</a> and <a href="/wysiwyg-editor/examples" title="Examples">tons of examples</a> make it easy to integrate. We&#39;re continuously&nbsp;</p> <p>working to add in new features and take the Javascript web WYSIWYG editing capabilities beyond its current limits.</p> <p> <br> </p> <p><img alt="Editor photo" class="fr-dii fr-draggable fr-fil" src="/assets/editor/pages/B/editor-photo-3eeba30c6186df86c859d6d14e9b02d0.jpg" width="200"></p> <p> <br> </p> <p><span class="fr-video fr-dvi fr-draggable" contenteditable="false" style=""><video controls=""><source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"><source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"></video></span></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.

I'm using nodejs and angular2 frameworks

Jquery Approach

var wrapHtmlString =  `<div>${htmlstring}</div>`;
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();

Answer 1

You can try the append-query npm package which can meet your requirement.

You can install it by issuing the below command,

npm install append-query

Check the documentation here: https://www.npmjs.com/package/append-query

Hope this helps!.