JosePedroDias/SnippetWithAttributes.js

## demo.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<title>snippet demo</title>
	</head>

	<body>
		<h1>snippet demo</h1>

		<p>stuff before</p>

		<script type="text/javascript" src="SnippetWithAttributes.js" data-text="first" data-color="#FFAAAA"></script>

		<script type="text/javascript" src="SnippetWithQueryString.js?text=first&color=green"></script>

		<p>stuff between</p>

		<script type="text/javascript" src="SnippetWithAttributes.js" data-text="second" data-color="#AAFFAA"></script>

		<script type="text/javascript" src="SnippetWithQueryString.js?text=second&color=red"></script>

		<p>stuff after</p>
	</body>
</html>

## SnippetWithAttributes.js
(function() {
	'use strict';

	var scriptName = 'SnippetWithAttributes.js';

	var getScriptEl = function() {
		var scriptEls = document.getElementsByTagName('script');
		var scriptEl, srcAttr;
		for (var i = 0; i < scriptEls.length; ++i) {
			scriptEl = scriptEls[i];
			srcAttr = scriptEl.getAttribute('src');
			if (scriptEl.getAttribute('parsed')) { continue; }
			if (srcAttr && srcAttr.indexOf(scriptName) !== -1) {
				scriptEl.setAttribute('parsed', '1');
				return scriptEl;
			}
		}
		throw scriptName + ' snippet: script element not found!';
	};

	var scriptEl = getScriptEl();

	var color = scriptEl.getAttribute('data-color');
	var text  = scriptEl.getAttribute('data-text');

	var divEl = document.createElement('span');
	divEl.innerHTML = text;
	divEl.style.backgroundColor = color;
	scriptEl.parentNode.replaceChild(divEl, scriptEl);
})();

## SnippetWithQueryString.js
(function() {
	'use strict';

	var scriptName = 'SnippetWithQueryString.js';

	var getScriptEl = function() {
		var scriptEls = document.getElementsByTagName('script');
		var scriptEl, srcAttr;
		for (var i = 0; i < scriptEls.length; ++i) {
			scriptEl = scriptEls[i];
			srcAttr = scriptEl.getAttribute('src');
			if (scriptEl.getAttribute('parsed')) { continue; }
			if (srcAttr && srcAttr.indexOf(scriptName) !== -1) {
				scriptEl.setAttribute('parsed', '1');
				return [scriptEl, srcAttr];
			}
		}
		throw scriptName + ' snippet: script element not found!';
	};

	var parseQueryString = function(url) {
		var aParams = {};
		if (url.match(/\?(.+)/i)) {
			var queryStr = url.replace(/^(.*)\?([^\#]+)(\#(.*))?/g, '$2');
			if (queryStr.length > 0) {
				var aQueryStr = queryStr.split(/[;&]/);
				for(var i=0; i < aQueryStr.length; i++) {
					var pairVar = aQueryStr[i].split('=');
					aParams[decodeURIComponent(pairVar[0])] = (typeof(pairVar[1]) !== 'undefined' && pairVar[1]) ? decodeURIComponent(pairVar[1]) : '';
				}
			}
		}
		return aParams;
	};

	var scriptInfo  = getScriptEl();
	var scriptEl    = scriptInfo[0];
	var scriptSrc   = scriptInfo[1];
	var queryArgs = parseQueryString(scriptSrc);

	var color = queryArgs.color;
	var text  = queryArgs.text;

	var divEl = document.createElement('span');
	divEl.innerHTML = text;
	divEl.style.backgroundColor = color;
	scriptEl.parentNode.replaceChild(divEl, scriptEl);
})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>snippet demo</title>
	</head>

	<body>
	<h1>snippet demo</h1>

	<p>stuff before</p>

	<script type="text/javascript" src="SnippetWithAttributes.js" data-text="first" data-color="#FFAAAA"></script>

	<script type="text/javascript" src="SnippetWithQueryString.js?text=first&color=green"></script>

	<p>stuff between</p>

	<script type="text/javascript" src="SnippetWithAttributes.js" data-text="second" data-color="#AAFFAA"></script>

	<script type="text/javascript" src="SnippetWithQueryString.js?text=second&color=red"></script>

	<p>stuff after</p>
	</body>
	</html>
	(function() {
	'use strict';

	var scriptName = 'SnippetWithAttributes.js';

	var getScriptEl = function() {
	var scriptEls = document.getElementsByTagName('script');
	var scriptEl, srcAttr;
	for (var i = 0; i < scriptEls.length; ++i) {
	scriptEl = scriptEls[i];
	srcAttr = scriptEl.getAttribute('src');
	if (scriptEl.getAttribute('parsed')) { continue; }
	if (srcAttr && srcAttr.indexOf(scriptName) !== -1) {
	scriptEl.setAttribute('parsed', '1');
	return scriptEl;
	}
	}
	throw scriptName + ' snippet: script element not found!';
	};

	var scriptEl = getScriptEl();

	var color = scriptEl.getAttribute('data-color');
	var text = scriptEl.getAttribute('data-text');

	var divEl = document.createElement('span');
	divEl.innerHTML = text;
	divEl.style.backgroundColor = color;
	scriptEl.parentNode.replaceChild(divEl, scriptEl);
	})();
	(function() {
	'use strict';

	var scriptName = 'SnippetWithQueryString.js';

	var getScriptEl = function() {
	var scriptEls = document.getElementsByTagName('script');
	var scriptEl, srcAttr;
	for (var i = 0; i < scriptEls.length; ++i) {
	scriptEl = scriptEls[i];
	srcAttr = scriptEl.getAttribute('src');
	if (scriptEl.getAttribute('parsed')) { continue; }
	if (srcAttr && srcAttr.indexOf(scriptName) !== -1) {
	scriptEl.setAttribute('parsed', '1');
	return [scriptEl, srcAttr];
	}
	}
	throw scriptName + ' snippet: script element not found!';
	};

	var parseQueryString = function(url) {
	var aParams = {};
	if (url.match(/\?(.+)/i)) {
	var queryStr = url.replace(/^(.)\?([^\#]+)(\#(.))?/g, '$2');
	if (queryStr.length > 0) {
	var aQueryStr = queryStr.split(/[;&]/);
	for(var i=0; i < aQueryStr.length; i++) {
	var pairVar = aQueryStr[i].split('=');
	aParams[decodeURIComponent(pairVar[0])] = (typeof(pairVar[1]) !== 'undefined' && pairVar[1]) ? decodeURIComponent(pairVar[1]) : '';
	}
	}
	}
	return aParams;
	};

	var scriptInfo = getScriptEl();
	var scriptEl = scriptInfo[0];
	var scriptSrc = scriptInfo[1];
	var queryArgs = parseQueryString(scriptSrc);

	var color = queryArgs.color;
	var text = queryArgs.text;

	var divEl = document.createElement('span');
	divEl.innerHTML = text;
	divEl.style.backgroundColor = color;
	scriptEl.parentNode.replaceChild(divEl, scriptEl);
	})();