How would I write a Regular Expression to capture the value between Last Slash and Query String?

Question

Problem:

Extract image file name from CDN address similar to the following:

https://cdnstorage.api.com/v0/b/my-app.com/o/photo%2FB%_2.jpeg?alt=media&token=4e32-a1a2-c48e6c91a2ba

Two-stage Solution:

I am using two regular expressions to retrieve the file name:

var postLastSlashRegEx = /[^\/]+$/,
    preQueryRegEx = /^([^?]+)/;

var fileFromURL =  urlString.match(postLastSlashRegEx)[0].match(preQueryRegEx)[0];

// fileFromURL = "photo%2FB%_2.jpeg"

Question:

Is there a way I can combine both regular expressions?

I've tried using capture groups, but haven't been able to produce a working solution.

You could split the string at the `?` and then substring from the last `/` onwards. Why do in regex what a simple function could do? — evolutionxbox, Apr 19 '17 at 14:02
How about a lookahead? [`/[^/]+(?=\?)/`](https://regex101.com/r/zdK1lM/1) — Joseph Marikle, Apr 19 '17 at 14:06
@JosephMarikle: In that case, `?` must appear in the input. When using `?` in a negated character class, it does not have to be there. — Wiktor Stribiżew, Apr 19 '17 at 14:09
@WiktorStribiżew Then you can just OR it with the end of the line indicator: `/[^/]+?(?=\?|$)/ ` — Joseph Marikle, Apr 19 '17 at 14:10
Thanks for all your help @JosephMarikle and @WiktorStribiżew! You've both helped me solve this. Didn't think about using a lookahead. — Lindauson, Apr 19 '17 at 14:36
And you do not need any lookahead here. Use my suggestion that involves the least overhead for a regex engine. — Wiktor Stribiżew, Apr 19 '17 at 14:45
@WiktorStribiżew Yes, that makes sense; lookaheads are "expensive". — Lindauson, Apr 19 '17 at 22:35
@Lindauson: Well, lookaheads by themselves are OK, but lookarounds with alternation inside are better saved for more complex scenarios. — Wiktor Stribiżew, Apr 20 '17 at 06:19

score 1 · Accepted Answer · answered Apr 19 '17 at 14:09

From my comment

You can use a lookahead to find the "?" and use [^/] to match any non-slash characters.

/[^/]+(?=\?)/

To remove the dependency on the URL needing a "?", you can make the lookahead match a question mark or the end of line indicator (represented by $), but make sure the first glob is non-greedy.

/[^/]+?(?=\?|$)/

score 0 · Answer 2 · answered Apr 19 '17 at 14:09

0

You don't have to use regex, you can just use split and substr.

var str = "https://cdnstorage.api.com/v0/b/my-app.com/o/photo%2FB%_2.jpeg?alt=media&token=4e32-a1a2-c48e6c91a2ba".split("?")[0];
var fileName = temp.substr(temp.lastIndexOf('/')+1);

but if regex is important to you, then:

str.match(/[^?]*\/([^?]+)/)[1]

answered Apr 19 '17 at 14:09

Sahar Zehavi

580
6
16

2

Please remove my regex from your answer if you do not understand what it does. – Wiktor Stribiżew Apr 19 '17 at 14:13

score 0 · Answer 3 · answered Apr 19 '17 at 14:21

0

The code using the substring method would look like the following -

var fileFromURL = urlString.substring(urlString.lastIndexOf('/') + 1, urlString.lastIndexOf('?'))

answered Apr 19 '17 at 14:21

Atty

691
13
20

Thanks for your response, @Atty. I knew I could use string functions but I wanted to see what a pure regex solution would look like. – Lindauson Apr 19 '17 at 14:40

How would I write a Regular Expression to capture the value between Last Slash and Query String?

3 Answers3