Posted By

pussard on 06/25/13

Tagged

css
images

Versions (?)

Last Edited at 06/25/13 04:47am

Statistics

Viewed 909 times

Favorited by 0 user(s)

Related snippets

CSS domain injector tool

/ Published in: JavaScript

This handy tool takes raw CSS and finds all relative URLs for background images and injects the absolute path. After which all the background images are displayed on the page. This is useful if you need a quick way to save all background images at once.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!doctype html>
<html>
<head>
	<title>CSS Domain Injector Tool</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>
	#output img { display: block; }
	html,
	body { font-family: sans-serif; }
	h4 { color: #999; }
	.textareas > div { margin: 0 0 0 2em; float: left; width: 48%; height: 25em; }
	.textareas label { display: block; }
	.textareas textarea { width: 100%; height: 90%; }
	.textareas > div:first-child { margin-left: 0; }
	#output, .textareas { overflow: hidden; }
	#path { width: 25%; }
	.warning { color: #c00; }
	</style>
</head>
<body>
<h1>CSS domain injector tool</h1>
<h4>Want to grab all the background images from a CSS file? Enter a root domain and press "Inject domain and show all images" to output new CSS that converts all root-relative URLs to absolute URLs. Then, just "Save Page As" to save the image dump.</h4>
<p>This tool ignores all relative paths, but outputs a message that it found one, so you'll have to manually convert those</p>
<input id="path" value="" placeholder="Enter root domain here (e.g. //example.com)" />
<button id="show-bg">Inject domain and show all images</button>
<div class="textareas">
	<div>
		<textarea id="css-input" placeholder="Paste in your CSS code here"></textarea>
		<!--
		Example data for debugging
		<textarea id="css-input">
background: url(/images/asdf.png);
background: url( /images/asdf.png );
background: url("/images/asdf.png");
background: url( "/images/asdf.png" );
background: url('/images/asdf.png');
background: url(   '/images/asdf.png'      );
background: url(/images/asdf.png);
background: url( /images/asdf.png );
background: url("/images/asdf.png");
background: url( "/images/asdf.png" );
background: url('/images/asdf.png');
background: url(   '/images/asdf.png'      );
background: url(//something.com/images/asdf.png);
background: url( //something.com/images/asdf.png );
background: url("//something.com/images/asdf.png");
background: url( "//something.com/images/asdf.png" );
background: url('//something.com/images/asdf.png');
background: url(   '//something.com/images/asdf.png'      );
background: url(http://something.com/images/asdf.png);
background: url( http://something.com/images/asdf.png );
background: url("http://something.com/images/asdf.png");
background: url( "http://something.com/images/asdf.png" );
background: url('http://something.com/images/asdf.png');
background: url(   'http://something.com/images/asdf.png'      );
 
background: url(../this/is/relative.png);
background: url(this/is/also/relative.png);
 
		</textarea>-->
	</div>
	<div>
		<textarea id="css-output" placeholder="New CSS with the added domain will be here"></textarea>
	</div>
</div>
<div style="overflow: hidden;">
	<h4><span id="total-img">0</span> Image/s shown<br />
		<span id="total-relative" class="warning">0</span> relative path/s:</h4>
	<div id="output"></div>
</div>
<script>
var changePaths = function () {
	var totalImg = 0;
	var totalRelative = 0;
	var cssInput = $('#css-input').val();
	var pattern = /url\(["']?(.*?)["']?\)/g;
	var reg = cssInput.match(/url\(["']?(.*?)["']?\)/gi);
	var cssOutput = $('#css-input').val();
	var path = $('#path').val();
	var imgOutput = '';
	var format = function (str) {
		// strip out all extra white space and quotes within url(...)
			str = str.replace(/\(\s*/gi, '(');
			str = str.replace(/\(["|']?/gi, '(');
			str = str.replace(/\s*\)/gi, ')');
			str = str.replace(/['|"]?\)/gi, ')');
			return str;
		};
	var extractPath = function (str) {
		// returns just the path of the url (everything inside the parens)
			return str.replace(/[url\(|\)]/gi, '');
		};
	var insertNewPath = function (str) {
			return str.replace(/url\(/gi, 'url(' + path);
		};
 
	$.each(reg, function (i) {
		var url = format(reg[i]);
		var filename = '';
		var isDomainAbsolute = url.indexOf('//') === 4 || url.indexOf('http') === 4;
		var isRootRelative = !isDomainAbsolute && url.indexOf('/') === 4;
 
		filename = url.substring(url.lastIndexOf('/')).replace(/\)/gi, '');
		cssOutput = format(cssOutput);
		if (!isDomainAbsolute && !isRootRelative) {
		// we are dealing with a relative link here - not accounting for that in output, so flag it instead
			totalRelative += 1;
			imgOutput += '<p><span class="warning">Relative path found for filename, <em>' + filename + '</em></span></p>';
		} else if (isRootRelative && !isDomainAbsolute) {
			cssOutput = cssOutput.replace(url, 'url(' + path + url.substring(4, url.length - 1) + ')');
			imgOutput += '<img data-elseif src="' + path + url.substring(4, url.length - 1) + '" />';
		} else {
			imgOutput += '<img data-else src="' + extractPath(url) + '" />';
		}
	});
	$('#total-img').html(reg.length);
	$('#total-relative').addClass('warning').html(totalRelative);
	$('#css-output').val(cssOutput);
	$('#output').html(imgOutput);
};
$('#show-bg').on('click', function () {
	changePaths();
});
</script>
</body>
</html>