在 JavaScript 中，如何从长字符串中提取图像文件的名称？

Question

Can you help to extract the file name from this string?

let str = "https://s3.amazonaws.com/test/testSite/product/image_folder/Z1-00034-01/1623934721778.jpeg%25253FX-Amz-Algorithm%25253DAWS4-HMAC-SHA256%252526X-Amz-Date%25253D20210722T050758Z%252526X-Amz-SignedHeaders%25253Dhost%252526X-Amz-Expires%25253D599%252526X-Amz-Credential%25253DAKIA4Z2VUPBRCPYFDP4G%2525252F20210722%2525252Fus-east-1%2525252Fs3%2525252Faws4_request%252526X-Amz-Signature%25253D259df0ed0fd8f827e74c612ff8d87e65e2f2c8d68f75a2f06eb71a84de3847a1%253FX-Amz-Algorithm%253DAWS4-HMAC-SHA256%2526X";

Output should be 1623934721778.jpeg .

Answer 1

Assuming you always wanted to target a JPEG file, you could use match here:

 let str = "https://s3.amazonaws.com/test/testSite/product/image_folder/Z1-00034-01/1623934721778.jpeg%25253FX-Amz-Algorithm%25253DAWS4-HMAC-SHA256%252526X-Amz-Date%25253D20210722T050758Z%252526X-Amz-SignedHeaders%25253Dhost%252526X-Amz-Expires%25253D599%252526X-Amz-Credential%25253DAKIA4Z2VUPBRCPYFDP4G%2525252F20210722%2525252Fus-east-1%2525252Fs3%2525252Faws4_request%252526X-Amz-Signature%25253D259df0ed0fd8f827e74c612ff8d87e65e2f2c8d68f75a2f06eb71a84de3847a1%253FX-Amz-Algorithm%253DAWS4-HMAC-SHA256%2526X"; filename = str.match(/\\b[^/\\s]+\\.(?:jpeg|png)/)[0]; console.log(filename);

Answer 2

Not sure why you're getting a triple escaped URL, but you can fix that like this:

 let str = "https://s3.amazonaws.com/test/testSite/product/image_folder/Z1-00034-01/1623934721778.jpeg%25253FX-Amz-Algorithm%25253DAWS4-HMAC-SHA256%252526X-Amz-Date%25253D20210722T050758Z%252526X-Amz-SignedHeaders%25253Dhost%252526X-Amz-Expires%25253D599%252526X-Amz-Credential%25253DAKIA4Z2VUPBRCPYFDP4G%2525252F20210722%2525252Fus-east-1%2525252Fs3%2525252Faws4_request%252526X-Amz-Signature%25253D259df0ed0fd8f827e74c612ff8d87e65e2f2c8d68f75a2f06eb71a84de3847a1%253FX-Amz-Algorithm%253DAWS4-HMAC-SHA256%2526X"; const url = new URL(unescape(unescape(unescape(str)))); const filename = url.pathname.split('/').pop(); console.log(filename)

Answer 3

 let str = "https://s3.amazonaws.com/test/testSite/product/image_folder/Z1-00034-01/1623934721778.jpeg%25253FX-Amz-Algorithm%25253DAWS4-HMAC-SHA256%252526X-Amz-Date%25253D20210722T050758Z%252526X-Amz-SignedHeaders%25253Dhost%252526X-Amz-Expires%25253D599%252526X-Amz-Credential%25253DAKIA4Z2VUPBRCPYFDP4G%2525252F20210722%2525252Fus-east-1%2525252Fs3%2525252Faws4_request%252526X-Amz-Signature%25253D259df0ed0fd8f827e74c612ff8d87e65e2f2c8d68f75a2f06eb71a84de3847a1%253FX-Amz-Algorithm%253DAWS4-HMAC-SHA256%2526X"; var patt1 = /[\\w&.-]+\\.([0-9a-z]+)(?:[\\?#%]|$)/i; var matches= str.match(patt1); let filename = matches[0].split(".")[0] + '.' +matches[1] console.log(matches) console.log(filename) //EDIT var patt2 = /([\\w&.-]+)\\.([0-9a-z]+)(?:[\\?#%]|$)/i; var matches= str.match(patt2); let filename2 = matches[1] + '.' +matches[2] console.log(matches) console.log(filename2)

1. [\\w&.-] - Matches FileName. If you change [\\w&.-] to [/\\/\\w&.-] it will match all characters except https://
2. [0-9a-z] - This one matches extension
3. [\\?#%] - Here you can add special characters to be removed
4. $ symbol will match last words
5. /i - ignore case in the given string
6. ([\\w&.-]+) and ([0-9a-z]+) will match filename and extension seperate