Revision: 63987
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at June 25, 2013 04:47 by pussard
Initial Code
<!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>
Initial URL
Initial Description
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.
Initial Title
CSS domain injector tool
Initial Tags
css, images
Initial Language
JavaScript