Question

我试图在html文件中创建一些延迟加载的js。所以我必须在html注释中创建模式，而不是为js文件注入脚本标记。像gulp-inject这样的东西，但我自己的方式。

这里的html评论示例：

<!--inject:module:js-->
<!--endinject-->

我想识别注释模式并在其中注入脚本标记，它应该执行以下操作：

<!--inject:module:js-->
<script src="app/start.module.js"></script>
<script src="app/some.module.js"></script>
<script src="app/content.module.js"></script>
<!--endinject-->

这是我迄今为止用RegEx尝试过的事情：

/(<!--(inject:?([\w]*?)?:?([\w]*?)?)-->)(<!--endinject-->)*?/gm

它只会选择第一个＆＃34;注入＆＃34;评价。

<!--inject:module:js-->

PS：我还是RegEx的新手。

谢谢！

Answer 1

适用于

<!--inject:module:js-->
<script src="app/start.module.js"></script>
<script src="app/some.module.js"></script>
<script src="app/content.module.js"></script>
<!--endinject-->

此

(<!--inject:(\w+):(\w+)-->(?:(?!<!--endinject-->)[\s\S])*)(?=<!--endinject-->)

匹配：

第1组：

<!--inject:module:js-->
<script src="app/start.module.js"></script>
<script src="app/some.module.js"></script>
<script src="app/content.module.js"></script>

第2组和第3组分别包含module和js。

您可以继续使用$1\n<script src="another/script.js"></script>\n替换所有匹配项。

这将保留注释结构，因此可以在同一输入上连续多次使用。

Answer 2

经过一番尝试（感谢@Tomalak），我找到了解决方案。

鉴于当前带有脚本标签的html评论：

<!--inject:module:js-->
<script src="app/start.module.js"></script>
<script src="app/some.module.js"></script>
<script src="app/content.module.js"></script>
<!--endinject-->

我这样做是为了匹配3组：

/(<!--(inject:?(\w*?):?(\w*?)?)-->)([\s\S]*?)(<!--endinject-->)/g

其中第1组是：

<!--inject:module:js-->

第2组是：

<script src="app/start.module.js"></script>
<script src="app/some.module.js"></script>
<script src="app/content.module.js"></script>

第3组是：

<!--endinject-->

通过这3个匹配，我可以检测到评论模式并在组2中附加其他脚本标签。这就是我想要的。

以下是测试的链接：http://regexr.com/3cibb

谢谢大家的帮助！

REGEX - 在html评论模式之间插入内容

2 个答案: