将查询参数附加到 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>

我正在寻找将查询参数附加到 html 字符串中的所有图像、视频 src url 的脚本，这需要在渲染到 DOM 之前完成。 输入模式与我分享的相似。 我尝试附加的查询参数是一个令牌，用于验证是否可以访问图像。

我正在使用 nodejs 和 angular2 框架

jQuery 方法

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

您可以尝试append-query npm 包，它可以满足您的要求。

您可以通过发出以下命令来安装它，

npm install append-query

在此处查看文档：https://www.npmjs.com/package/append-query

希望这会有所帮助！