如何在 JavaScript 的文件扩展名前插入文本？

Question

我有这样的图片网址

https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393

我需要在文件扩展名前插入 _small 以获得该图像大小，它应该如下所示

https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7_small.jpg?v=1579953393

（图片可以有不同的文件扩展名。）

使用 JavaScript 执行此操作的最佳方法是什么？也许正则表达式？

尝试使用 this 正则表达式，但它不适用于文件扩展名后的 ?v=1579953393。

Answer 1

一种方法是这样，您确定图像扩展名是 .jpg。
然后你可以 split 字符串。

let str = 'https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393';

let strArr = str.split('.jpg');

console.log(strArr[0]);

let newStr = `${strArr[0]}_small`;

console.log(newStr);

let url = `${newStr}.jpg${strArr[1]}`;

console.log(url);

晚上使用 URL interface 你可以做到这一点。

Answer 2

这应该对您有所帮助。您只需要添加每个可用于 fileTypes 数组的扩展类型。

const url = "https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393";

const fileTypes = ['.jpg','.png']; //add each extension that you will use here.

const urlType = fileTypes.filter(type => url.search(type)> 0)[0];

let newUrl = urlType ? url.replace(urlType,`_small${urlType}`) : null;

console.log(newUrl)

Answer 3

let str = "https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393";
let[filename, extension] = str.split('.jpg');

let rename = filename+'_small.'+extension;

console.log('New file name',rename);

希望对你有所帮助

Answer 4

您可以使用这个正则表达式：

((?:.+\/.+)+\/)(.?.+)+\.(.+)\?(.*)

var url = 'https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393';
url = url.replace(/((?:.+\/.+)+\/)(.?.+)+\.(.+)\?(.*)/,"_small.?");
alert(url);

((?:.+\/.+)+\/) : matches text from starting to last slash (/) - protocol,host, and folders 
(.?.+)+         : filename 
\.              : Specific char . - before file extension
(.+)            : file extension
\?              : special character ? - starting of search params
(.*)            : search params

然后像这样替换组：

_small.?

Answer 5

我确实设法返工 this answer 来完成这项工作。它看起来像这样并且按预期工作。

image = 'https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393';
image = image.replace(/(\.[\w\d?=_-]+)$/i, '_small');

Answer 6

我的解决方案并不总是最短或最优雅的，但是，我认为它们在可读性方面很重要。

我不喜欢上面解决方案的可扩展性和可读性，所以我写了这个函数：

append_to_file_name (file_name, str_to_append) {

    if (file_name && file_name.indexOf('.') >= 0) {

        let file_qs;
        let file_ext;
        let file_name_array = [];
        let file_q_index = file_name.indexOf('?');

        if (file_q_index >= 0) {

            file_qs = file_name.substring(file_q_index);
            file_name = file_name.substring(0, file_q_index);

        }

        file_name_array = file_name.split('.');
        file_ext = file_name_array.pop();

        file_name = (`${ file_name_array.join() }${ str_to_append }.${ file_ext }${ file_qs }`);

    }

    return file_name;

},

如何在 JavaScript 的文件扩展名前插入文本？

How can I insert text before the file extension with JavaScript?

javascript

shopify