Question

我正在使用Reactjs，并且试图显示图像的价值。 valyue / url非常大，因此在UI上看起来很丑。

我想知道如何做类似问题标题的事情：

正则表达式仅显示文件扩展名中最后一个/之后和第一个?之后的字符

因此，对于下面的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

我会是：TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png

仅使用灰色部分：

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 = de0b4f862f69382002c3c0e3e6da5affc41bbe29d0b3c210e4f

有可能吗？

Answer 1

一种实现方法是使用native API来解析URL。

像这样简单地创建一个新的URL对象：

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");

现在，此URL对象将具有pathname属性，其中将包含字符串/images/originals/TrCZMu1OuVYXAK4cdSS57EZyUCYDWK29KWr6vlbh.png

因此，您现在可以简单地将斜线分开，然后弹出以获取最后一个子字符串：

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())

Answer 2

一种非正则表达式的解决方案如下，以防您真的不需要正则表达式。

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())

Answer 3

使用String方法的解决方案

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);

如何精心设计正则表达式，以仅显示文件扩展名后第一个问号之前的最后一个斜杠之后的字符？

3 个答案: