Javascript Regex: How to extract html tag values in group?

Question

Context

I'm new to regex (still practicing) and I'm trying to extract script src or link href values from tags (for education purposes).

Given following html

<!-- hello -->
    <script src="1.js"></script>
    <script src="2.js"></script>
    <link rel="stylesheet" href="3.css"/>
<!-- world -->

I'd want to get

array of: 1.js, 2.js and 3.css

I've tried

This is the regex I've did so far, but meh.

/(?:<!-- hello -->\s*?)([\s\S]*?)(?:\s?<!-- world -->)/gmi

Of course, I have to replace [\s\S]*? with something better but I've tried a lot of combinations and none of them worked.

Regards.

Update

Only scripts between  tags should be matched.

Following should not match:

<!-- foo-->
    <script src="4.js"></script>
    <script src="5.js"></script>
    <link rel="stylesheet" href="6.css"/>
<!-- bar-->

You have completed Step 1. Now, proceed to Step 2, just use the /(?:src|href)="([^"]*)"/g and grab Group 1 values. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Aug 28, 2017 at 7:47
without completing first step, it's not possible to grab directly other ones? — Nika
– Nika, Commented Aug 28, 2017 at 7:56
Oh, understood! Please post it as an answer and I'll accept that. — Nika
– Nika, Commented Aug 28, 2017 at 7:58
I suggest that you write it yourself, this way you will learn better. Just use my comment for guidance. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Aug 28, 2017 at 7:59

Nika · Accepted Answer · 2017-08-28 08:19:29Z

1

use the regex

<!-- hello -->([\S\s]+)<!-- world -->

to extract the valid string in the first group see the regex demo

then you can use the regex

<(?:script src.*|link.*href)="(\w+\.\w+)

all matches would be in group 1

see the regex demo

edited Aug 28, 2017 at 8:19

Nika

1,9943 gold badges24 silver badges45 bronze badges

answered Aug 28, 2017 at 7:49

marvel308

10.5k3 gold badges24 silver badges32 bronze badges

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

1 Comment

marvel308 Over a year ago

you can extract text between  and then apply this regex on the resulting string

Nika · Accepted Answer · 2017-08-28 08:06:05Z

1

So, as Wiktor Stribiżew mentioned, it should be done in steps, because it's not possible in JS to directly get the result.

First you'll have to grab elements between  tags and then use global search on the result.

Thanks Wiktor Stribiżew!

answered Aug 28, 2017 at 8:06

Nika

1,9943 gold badges24 silver badges45 bronze badges

2 Comments

Maciej Jureczko Over a year ago

If it's the correct solution, mark it as the answer :)

Nika Over a year ago

can't yet, at least for two days :-(

Mohhamad Hasham · Accepted Answer · 2017-08-28 07:47:42Z

0

If you have an element like

<name attribute=value attribute="value" attribute='value'>

this regex could be used to find successively each attribute name and value

(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?

Applied on:

<a href=test.html class=xyz>
<a href="test.html" class="xyz">
<a href='test.html' class="xyz">

it would yield:

'href' => 'test.html'
'class' => 'xyz'

answered Aug 28, 2017 at 7:47

Mohhamad Hasham

2,0721 gold badge17 silver badges18 bronze badges

1 Comment

Mohhamad Hasham Over a year ago

You can try something like regexr.com Or, regex101.com As per your need :-)

Collectives™ on Stack Overflow

Javascript Regex: How to extract html tag values in group?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related