Extract image from img style="background:url('path') but not from src

Question

How can i extract the background image given using style attribute in image tag. In the above tag i want to extract the image from style attribute but not from src. I want the image to be extracted but not the path of the image.

Answer 1

尝试这个

var imageUrl = document.getElementById('myImage').style.background.image.url;

Answer 2

You could use HTML Agility pack and:

var images = doc.DocumentNode.Descendants("img").Where(d => d.Attributes.Contains("style") && d.Attributes["style"].Value.Contains("background:url")).ToList();

Which will return a list of type HtmlAgilityPack<HtmlNode> which holds all of your images, you can then enumerate over them get the values.

Answer 3

If you are doing any complex html parsing HTML Agility Pack is a good solution.

However if this is all you want to do, a simple regex would do the trick.

If you have set the image using the css tags, image or background-image, you can search for the url and extract the full path.

This very simple regex will do that.

url\(.*?\)

Extracting only the image path from the full path should be trivial after that.

Answer 4

you could also use simple regex with this problem after xpathing your way using HTML Agility Pack

style=background:url\('(?<bgpath>.*)'\)

here's a sample code

static void Main(string[] args)
{
    string innerHTML = "<img style=\"background:url('images/logo.jpg')\" />";

    string regex = @"style=""background:url\('(?<bgpath>.*)'\)\""";
    RegexOptions options = ((RegexOptions.IgnorePatternWhitespace | RegexOptions.Multiline) | RegexOptions.IgnoreCase);
    Regex reg = new Regex(regex, options);
    if (reg.IsMatch(innerHTML))
    {
        Console.WriteLine(reg.Match(innerHTML).Groups["bgpath"].Value);
    }

    Console.ReadLine();
}