使用正则表达式从字符串中提取图像 url

Question

我有一个看起来像这样的字符串：

var complicatedString = "<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/32.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Sunny\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Fri - Sunny. High: 23Low: 13\n<BR /> Sat - Thunderstorms. High: 25Low: 15\n<BR /> Sun - Thunderstorms. High: 28Low: 21\n<BR /> Mon - Partly Cloudy. High: 24Low: 17\n<BR /> Tue - Partly Cloudy. High: 26Low: 18\n<BR />\n<BR />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-23511893/\">Full Forecast at Yahoo! Weather</a>\n<BR />\n<BR />\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)\n<BR />\n]]>"

我需要提取http://l.yimg.com/a/i/us/we/52/32.gif。我想出的正则表达式是：

var re = /(alt|title|src)=(\"[^"]*\")/i;

参见Fiddle：https://jsfiddle.net/47rveu62/2/

我不确定为什么，但这不起作用。

var re = /(alt|title|src)=(\"[^"]*\")/i;
var m;
do {
  m = re.exec(complicatedString);
} while(m !== null);

更新： 正则表达式 101 声称它有效 https://regex101.com/r/oV2hO2/1

Answer 1

问题出在正则表达式上。

字符串中的反斜杠用于转义双引号字符串中的双引号。 反斜杠是转义字符，不是字符串的一部分。因此，在正则表达式中不需要这些。

var re = /(alt|title|src)=(\"[^"]*\")/i;
                           ^^      ^     // Remove those

使用

/(alt|title|src)=("[^"]*")/gi;

此处的 g 标志是必需的，因为正则表达式的 lastIndex 属性未被 RegExp#exec 更新，下一次迭代正则表达式将从相同的索引，因此将进入无限循环。 MDN

var complicatedString = "<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/32.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Sunny\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Fri - Sunny. High: 23Low: 13\n<BR /> Sat - Thunderstorms. High: 25Low: 15\n<BR /> Sun - Thunderstorms. High: 28Low: 21\n<BR /> Mon - Partly Cloudy. High: 24Low: 17\n<BR /> Tue - Partly Cloudy. High: 26Low: 18\n<BR />\n<BR />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-23511893/\">Full Forecast at Yahoo! Weather</a>\n<BR />\n<BR />\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)\n<BR />\n]]>";

var re = /(alt|title|src)=("[^"]*")/gi;
var m;
while(m = re.exec(complicatedString)) {
    console.log(m[2]);
}

我建议您使用以下正则表达式

/img.*?src=("|')(.*?)/i;

var complicatedString = "<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/32.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Sunny\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Fri - Sunny. High: 23Low: 13\n<BR /> Sat - Thunderstorms. High: 25Low: 15\n<BR /> Sun - Thunderstorms. High: 28Low: 21\n<BR /> Mon - Partly Cloudy. High: 24Low: 17\n<BR /> Tue - Partly Cloudy. High: 26Low: 18\n<BR />\n<BR />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-23511893/\">Full Forecast at Yahoo! Weather</a>\n<BR />\n<BR />\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)\n<BR />\n]]>";

var regex = /img.*?src=("|')(.*?)/i;
var match = complicatedString.match(regex)[2];
console.log(match);

Answer 2

这里有一个适用于您的输入的可能很幼稚的正则表达式： /(https?:\/\/.*\.(?:png|jpg|gif))/

Answer 3

这听起来像是一个 XY 问题，可能不需要正则表达式。

您正在使用 Yahoo!天气 API。图片的代码直接在 API 中可用，因此无需解析结果来查找图片。

这是一个示例 API 端点：https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys

不同的状态图片保存为code属性。您可以直接访问该图像代码。这是一个提取图像代码、日期和天气描述的示例。

var apiUrl = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"

function appendToBody(obj) {
    document.getElementsByTagName("body")[0].innerHTML += ("<div><img src='http://l.yimg.com/a/i/us/we/52/"+obj.code+".gif' />" + obj.date +": "+obj.text+"</div>");
}


function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
     var response = JSON.parse(xhttp.responseText);
     var current = response.query.results.channel.item.condition;
     appendToBody(current);



     var forecast = response.query.results.channel.item.forecast;

     for(var i = 0; i < forecast.length; i++) {
            appendToBody(forecast[i]);
     }
    }
  };
  xhttp.open("GET", apiUrl, true);
  xhttp.send();
}


loadDoc();

示例输出：

<div><img src="http://l.yimg.com/a/i/us/we/52/26.gif">Fri, 10 Jun 2016 06:00 AM AKDT: Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/26.gif">10 Jun 2016: Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/28.gif">11 Jun 2016: Mostly Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/26.gif">12 Jun 2016: Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/12.gif">13 Jun 2016: Rain</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/28.gif">14 Jun 2016: Mostly Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/30.gif">15 Jun 2016: Partly Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/26.gif">16 Jun 2016: Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/39.gif">17 Jun 2016: Scattered Showers</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/26.gif">18 Jun 2016: Cloudy</div>
<div><img src="http://l.yimg.com/a/i/us/we/52/28.gif">19 Jun 2016: Mostly Cloudy</div>

看到它在这个 JS 中工作 Fiddle https://jsfiddle.net/igor_9000/u27br5Lg/2/

天气 API 文档可在此处获取：https://developer.yahoo.com/weather/documentation.html

希望对您有所帮助！

使用正则表达式从字符串中提取图像 url

Using regex to extract an image url from string

javascript

regex

string-parsing