使用javascript正则表达式提取图像路径

Question

我使用ajax请求信息表单Web服务，此服务为我返回图像，我需要在我的代码中使用该图像。

我对此服务的问题，是文本的返回差异：

• 表格1：“/ site / images / test.png”
• 表格2：“/ site / images / test.png？size = 3”
• 表格3：“<img src='/site/images/test.png />”
• 表格4：“<img src='/site/images/test.png?size=3' />”
• 表格4：“<div><img src='/site/images/test.png?size=3' /></div>”
• 表格5：“”返回空字符串

此服务从遗留系统中提取数据并根据用户输入的时间，我无法更改服务。我需要使用JavaScript提取图像路径。此路径应该只是没有任何标签或查询字符串的图像路径。

注意：图片扩展名为

Answer 1

这是你应该使用的正则表达式：

.*?(\/[\/\w\.]+)[\s\?]?.*

在regex101上查看此操作。

如何在Javascript中使用它：

var rex = /.*?(\/[\/\w\.]+)[\s\?]?.*/;
var res = rex.exec("<img src='/site/images/test.png?size=3' />");
console.log(res[1]);  //Will print /site/images/test.png

链接到JSFiddle。

Answer 2

试试这个正则表达式，将匹配所有图像：

/(\/.*?\.\w{3})/img

REGEX DEMO

---

您的代码可能如下所示：

var image = "<div><img src='/site/images/test.png?size=3' /></div>";
result = image.match(/(\/.*?\.\w{3})/img);
console.log(result[0]);

---

输出：

/site/images/test.png

---

CODEPEN DEMO

Answer 3

您可以使用这样的简单正则表达式：

(\/.*\.\w+)

Working demo

Javascript 代码

var re = /(\/.*\.\w+)/g; 
var str = 'Form 1: "/site/images/test.png"\nForm 2: "/site/images/test.png?size=3"\nForm 3: "<img src=\'/site/images/test.png />"\nForm 4: "<img src=\'/site/images/test.png?size=3\' />"\nForm 4: "<div><img src=\'/site/images/test.png?size=3\' /></div>"\nForm 5: "" return empty string';
var m;

if ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    // View your result using the m-variable.
    // eg m[0] etc.
}