REGEX - Inserting things between html comment pattern

Question

I'm trying to create some js to lazy loading in html files. So I have to create the patterns inside html comments and than inject the script tags for js files. Something like gulp-inject, but my own way.

Here's html comment examples:

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

I want to to identify comment patterns and inject the script tag inside then and it should do something like:

<!--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-->

Here's what I have tried till now with RegEx:

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

It will select only the first "inject" comment.

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

PS.: I'm still newbie in RegEx.

Thanks!

if your regex was working before. you can try this. /().*()*?/gm . moreover please add more code to understand how you are fetching comments — Sachin
– Sachin, Commented Jan 9, 2016 at 15:37
Could you try to clarify your question? I cannot parse your first sentence, "I'm trying to create some js to lazy loading in html files." — user663031
– user663031, Commented Jan 9, 2016 at 16:21
Basically, I want to identify the pattern in the comments and inject the script tag between both comments. — Leo Ribeiro
– Leo Ribeiro, Commented Jan 9, 2016 at 16:29

Tomalak · Accepted Answer · 2016-01-09 16:56:26Z

1

When applied to

<!--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-->

this

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

matches:

Group 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>

groups 2 and 3 contain module and js, respectively.

You could go ahead and replace any matches with $1\n<script src="another/script.js"></script>\n.

This would retain the comment structure and therefore could be used multiple times in a row on the same input.

answered Jan 9, 2016 at 16:56

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leo Ribeiro · Accepted Answer · 2016-01-12 13:23:31Z

1

After some tries (thanks to @Tomalak), I found the solution.

Given the current html comment with script tags:

<!--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-->

I did this to match 3 groups:

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

where group 1 is:

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

Group 2 is:

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

And group 3 is:

<!--endinject-->

With this 3 matches I can detect the comment patterns and append other script tags in group 2. This is what I wanted.

Here's the link to test: http://regexr.com/3cibb

Thanks all for the help!

edited Jan 12, 2016 at 13:23

answered Jan 11, 2016 at 16:04

Leo Ribeiro

1,2851 gold badge15 silver badges27 bronze badges

6 Comments

Tomalak Over a year ago

Saying "thanks" works by upvoting (and possibly accepting) the answers that helped you. Not repaying the people that helped you (and instead posting your own version of the same answer) is rude. Please don't be rude.

Tomalak Over a year ago

Also, your regex contains at least three errors. This expression could never actually have worked.

Leo Ribeiro Over a year ago

Sorry. I didn't want to be rude. What's wrong in this regex? I didn't find errors.

Leo Ribeiro Over a year ago

Also...Could you edit your question? Than I can accept it.

Leo Ribeiro Over a year ago

Nice! Thanks again @Tomalak!

|

Collectives™ on Stack Overflow

REGEX - Inserting things between html comment pattern

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related