72722

Extract all URL links from CSS file

Question:

I have a asset file with CSS and that contains properties as: background-image: url(my-url.jpg) Im trying to extract all images from the url(). How can i achieve that in JS?

Answer1:

If the style sheet is loaded to the page, you can get the <a href="https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList" rel="nofollow">StyleSheetList</a>, and pick your style sheet using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets" rel="nofollow">document.styleSheets</a>. After selecting the style sheet, iterate it's rules with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b" rel="nofollow">Array#reduce</a>, extract the backgroundImage url using a regular expression, and if the result is not null (we have a url), push it into the urls array:

You can can get relevant s

<pre class="snippet-code-js lang-js prettyprint-override">const result = [...document.styleSheets[0].rules] .reduce((urls, { style }) => { var url = style.backgroundImage.match(/url\(\"(.+)\"\)/); url && urls.push(url[1]); return urls; }, []); console.log(result); <pre class="snippet-code-css lang-css prettyprint-override">.bg { width: 100px; height: 100px; } .a { background: url(http://lorempixel.com/200/200); } .b { background: url(http://lorempixel.com/100/100); } <pre class="snippet-code-html lang-html prettyprint-override"><div class="bg a"></div> <br /> <div class="bg b"></div>

Answer2:

You can use .match(), .map() and .replace()

let res = CSSText.match(/url\(.+(?=\))/g).map(url => url.replace(/url\(/, ""));

Answer3:

I've extended @guest271314's answer with jQuery ajax. You may use it.

$(document).ready(function() { $.get("main.css", function(cssContent){ let res = cssContent.match(/url\(.+(?=\))/g).map(url => url.replace(/url\(/, "")); alert( res ); }); });

Recommend

  • Paste yanked block with `p` gets mixed with lines below
  • How to enable httpsrc plug-in in my gstreamer?
  • Xpath Regex in PHP not working
  • Removing per-panel unused factors in a bar chart
  • Magento - FishPig Integration - Not getting correct template for /blog
  • lodash _.get function in typescript
  • Better algorithm for if condition
  • Python regex catastrophic backtracking
  • How to reduce the time delay to reach run method of Runnable class using ExecutorService Java
  • Performance of System.IO.ReadAllxxx / WriteAllxxx methods
  • Plotly and ggplot with facet_grid in R: How to to get yaxis labels to use ticktext value instead of
  • How to not let setText crash/freeze my whole application? Even using SwingUtilities and Threads?
  • How to insert an Image in WORD after a bookmark using OpenXML
  • Hadoop shuffle uses which protocol?
  • Listen to the 'change' even of an element in the shadow DOM
  • Notepad++ - delete all lines with certain text
  • Error Code: 1054. Unknown column
  • finding greatest prime factor using recursion in c
  • Crafting a LINQ based solution to determine if a set of predicates are satisfied for a pair of colle
  • Imageloader not loading image on real device
  • how to remove a div with same ids but display='block' and display='none' in JAVa
  • change color of jstree node
  • How to validate a year I enter in textbox using jquery rule?
  • Is looping through all style sheets and classes a good idea in JavaScript?
  • Laravel at least one field is required
  • What's the syntax to inherit documentation from another indexer?
  • Why the SequenceFile is truncated?
  • Is there some graphical way to create my own configuration file on SonarLint?
  • DIV instruction jumping to random location?
  • msbuild create itemgroup from property group
  • Updating both a ConcurrentHashMap and an AtomicInteger safely
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • htaccess add www if not subdomain, if subdomain remove www
  • JSON response opens as a file, but I can't access it with JavaScript
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Change an a tag attribute in JavaScript based on screen width
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Benchmarking RAM performance - UWP and C#
  • Angular 2 constructor injection vs direct access
  • IndexOutOfRangeException on multidimensional array despite using GetLength check