-2

I am working with Reactjs and I am trying to show the value of an image. The valyue/url is pretty big so it looks ugly on the UI.

I would like to know how can I do something like the title of the question:

Regex to show only the characters after the last / and before the first ? after the extension of the file

So, in the case of the URL below.

https://axsfundbeta-assets.s3.amazonaws.com/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA6GTYRA24ZFJLKRMN%2F20190604%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190604T071137Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1200&X-Amz-Signature=de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c98e7bc210272f4d2c5d

I would be: TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png

Taking only the grey part:

https://axsfundbeta-assets.s3.amazonaws.com/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA6GTYRA24ZFJLKRMN%2F20190604%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190604T071137Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1200&X-Amz-Signature=de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c98e7bc210272f4d2c5d

Is that possible?

Non
  • 8,409
  • 20
  • 71
  • 123
  • Can I know what is wrong with the question? I just asked if that is possible. – Non Jun 04 '19 at 07:22
  • Why don't you parse the URL using the [native API](https://developer.mozilla.org/en-US/docs/Web/API/URL) ? (edit : I put the code in my answer) – Seblor Jun 04 '19 at 07:25
  • @Seblor [we even have a good answer here](https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript/15979390#15979390) – VLAZ Jun 04 '19 at 07:29

3 Answers3

3

One way to do it is by using the native API to parse the URL.

Simply create a new URL object like so :

new URL("https://axsfundbeta-assets.s3.amazonaws.com/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA6GTYRA24ZFJLKRMN%2F20190604%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190604T071137Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1200&X-Amz-Signature=de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c98e7bc210272f4d2c5d");

Now, this URL object will have a pathname property which will contain the string /images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png

So you can now simply split on the slashes, and pop to get the last substring :

console.log(new URL("https://axsfundbeta-assets.s3.amazonaws.com/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA6GTYRA24ZFJLKRMN%2F20190604%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190604T071137Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1200&X-Amz-Signature=de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c98e7bc210272f4d2c5d").pathname.split("/").pop())
Seblor
  • 6,947
  • 1
  • 25
  • 46
0

A non-regex solution is as follows, in case you don't really need regex.

var url = 'https://axsfundbeta-assets.s3.amazonaws.com/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA6GTYRA24ZFJLKRMN%2F20190604%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190604T071137Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1200&X-Amz-Signature=de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c98e7bc210272f4d2c5d'

// Path component after strip query string
var components = url.split("?")
console.log(components[0])

var paths = components[0].split("/")
// Taking only the last part of the path
console.log(paths[paths.length -1])

// Or Array.pop()
console.log(paths.pop())
jimmy5312
  • 329
  • 2
  • 7
0

The solution that uses String methods

var str = "https://axsfundbeta-assets.s3.amazonaws.com/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA6GTYRA24ZFJLKRMN%2F20190604%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190604T071137Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1200&X-Amz-Signature=de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c98e7bc210272f4d2c5d";

let start = str.lastIndexOf('/') + 1;
let len = str.indexOf('?') - start;
let subs = str.substr(start, len);
console.log(subs);
Banzay
  • 9,310
  • 2
  • 27
  • 46