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;

请参阅小提琴：https://jsfiddle.net/47rveu62/2/

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

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

更新：Regex 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=("|')(.*?)\1/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=("|')(.*?)\1/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％20其中％20woeid％20in％20（选择％20woeid％20from％20geo.places（1）％20其中％20text％3D％ 22nome％2C％20ak％22）及格式= JSON＆安培; ENV =商店％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();

示例输出：

＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/26.gif”＆gt;星期五，2016年6月10日06:00 AM AKDT：多云＆LT; / DIV＆GT;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/26.gif”＆gt; 2016年6月10日：Cloudy＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/28.gif”＆gt; 2016年6月11日：多云＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/26.gif”＆gt; 2016年6月12日：Cloudy＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/12.gif”＆gt; 2016年6月13日：Rain＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/28.gif”＆gt; 2016年6月14日：多云＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/30.gif”＆gt; 2016年6月15日：部分多云＆lt; / div＆gt;

  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/26.gif”＆gt; 2016年6月16日：Cloudy＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/39.gif”＆gt; 2016年6月17日：分散的阵雨＆lt; / div＆gt;

  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/26.gif”＆gt; 2016年6月18日：Cloudy＆lt; / div＆gt;
  ＆lt; div＆gt;＆lt; img src =“http://l.yimg.com/a/i/us/we/52/28.gif”＆gt; 2016年6月19日：主要是多云＆lt; / div＆gt;

看到它在这个JS小提琴https://jsfiddle.net/igor_9000/u27br5Lg/2/

中工作

此处提供了天气API文档：https://developer.yahoo.com/weather/documentation.html

希望有所帮助！

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

3 个答案: