Using regex to extract an image url from string

Question

I have a string that looks like this:

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]]>"

I need to extract http://l.yimg.com/a/i/us/we/52/32.gif . The regex I came up with is:

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

See Fiddle: https://jsfiddle.net/47rveu62/2/

I'm not sure why but this isn't working.

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

Update: Regex 101 claims it works https://regex101.com/r/oV2hO2/1

Answer 1

The problem is with the regex.

The backslashes in the string are used to escape the double-quote inside double-quoted string. The backslashes are the escape characters and not part of the string. So, in regex those are not required.

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

Use

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

The g flag here is required as the lastIndex property of the regex is not updated by RegExp#exec and the next iteration the regex will start search from the same index and will thus go in infinite loop. 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]); } 

---

I'd suggest you to use following regex

/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

This sounds like an XY problem, and regex may not be necessary.

You're using the Yahoo! Weather API. The codes for the images are available directly in the API, so there is no need to parse the result to find the image.

Here is an example API endpoint: 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

The different status images are saved as the code property. You can access that image code directly. Here is an example that pulls the image code, date, and weather description.

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();

Example output:

<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>

See it working in this JS Fiddle https://jsfiddle.net/igor_9000/u27br5Lg/2/

The weather API documentation here available here: https://developer.yahoo.com/weather/documentation.html

Hope that helps!