使用正则表达式从字符串中提取图像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;

见小提琴： 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))/ : /(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（选择％20woeid％20from％ 20geo.places（1）％20where％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();

示例输出：

<div> <img src =“http://l.yimg.com/a/i/us/we/52/26.gif”>周五，2016年6月10日上午06:00 AKDT：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/26.gif”> 2016年6月10日：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/28.gif”> 2016年6月11日：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/26.gif”> 2016年6月12日：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/12.gif”> 2016年6月13日：Rain </ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/28.gif”> 2016年6月14日：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/30.gif”> 2016年6月15日：部分多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/26.gif”> 2016年6月16日：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/39.gif”> 2016年6月17日：零星阵雨</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/26.gif”> 2016年6月18日：多云</ div>
<div> <img src =“http://l.yimg.com/a/i/us/we/52/28.gif”> 2016年6月19日：多云</ div>

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

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

希望有所帮助！