Arbitrary Stack Snippet Loader

Question

The Stack Snippet below loads the first Stack Snippet in the Stack Exchange post defined by site, postID, and isAnswer. (Inspired by this and this.)

It assumes there is only one Stack Snippet in the post and may load the wrong code if there is more than one.

• One possible application is to have this point to a generalized leaderboard Snippet. So any changes/fixes to the leaderboard Snippet are reflected in all the Snippets that point to it. Optimizer has done this.

• Another application is to point it to a very long Snippet that wouldn't fit in the post otherwise.

A golfed version with copyable raw markdown is available below.

This ungolfed Snippet loads from here.

site = 'meta.codegolf'
postID = 5311
isAnswer = true
jQuery(function() {
	var url = 'https://api.stackexchange.com/2.2/'
	if (isAnswer)
		url += 'answers/' + postID + '?order=asc&sort=creation&site=' + site + '&filter=!GeEyUcJFJeRCD'
	else
		url += 'questions/' + postID + '?order=asc&sort=creation&site=' + site + '&filter=!GeEyUcJFJO6t)'
	jQuery.get(url, function(b) {
			function d(s) { return jQuery('<textarea>').html(s).text() }
			function r(l) { return new RegExp('<pre class="snippet-code-' + l + '\\b[^>]*><code>([\\s\\S]*?)</code></pre>') }
			b = b.items[0].body
			var js = r('js').exec(b), css = r('css').exec(b), html = r('html').exec(b)
			if (css !== null)
				jQuery('head').append(jQuery('<style>').text(d(css[1])))
			if (html !== null)
				jQuery('body').append(d(html[1]))
			if (js !== null)
				jQuery('body').append(jQuery('<script>').text(d(js[1])))
		}
	)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(I use jQuery instead of $ to hopefully avoid this issue.)

• Doorknob: Why is this so complicated when you could just link to the script directly using <script src='...'></script> in the HTML section?
• Calvin's Hobbies: @Doorknob Can you show me how? I'd assumed the src had to be a plain js file, so just linking to an answer wouldn't help.
• Doorknob: You can link to the plaintext of a revision like so (it's in the list of revisions, under the "source" link).
• Calvin's Hobbies: @Doorknob Alright, that gives the js, but to have the css and html you'd need other revisions or answers, or have to store it as a string in the js, both of which are way less manageable. The snippet in the pointed-to post should be runnable and easy to update.
• Doorknob: Ah, that explains it. Thought you were only concerned with JS here.
• Calvin's Hobbies: @Doorknob Initially I was, but turning into a full fledged snippet cloner seemed the most useful. (It's still really nice to know you can link to post plaintext. :) )

Answer 1

Copyable Version

Copy this exact raw markdown into the post where you want to use the Arbitrary Stack Snippet Loader. Adjust site, postID, and isAnswer in the first <script> tag on the second line as necessary.

<!-- begin snippet: js hide: false --><!-- language: lang-html -->
<script>site = 'codegolf'; postID = 50690; isAnswer = false</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script><script>jQuery(function(){var u='https://api.stackexchange.com/2.2/';if(isAnswer)u+='answers/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJeRCD';else u+='questions/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJO6t)';jQuery.get(u,function(b){function d(s){return jQuery('<textarea>').html(s).text()};function r(l){return new RegExp('<pre class="snippet-code-'+l+'\\b[^>]*><code>([\\s\\S]*?)</code></pre>')};b=b.items[0].body;var j=r('js').exec(b),c=r('css').exec(b),h=r('html').exec(b);if(c!==null)jQuery('head').append(jQuery('<style>').text(d(c[1])));if (h!==null)jQuery('body').append(d(h[1]));if(j!==null)jQuery('body').append(jQuery('<script>').text(d(j[1])))})})</script><!-- end snippet -->

It should render like this:

<script>site = 'codegolf'; postID = 50690; isAnswer = false</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script><script>jQuery(function(){var u='https://api.stackexchange.com/2.2/';if(isAnswer)u+='answers/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJeRCD';else u+='questions/'+postID+'?order=asc&sort=creation&site='+site+'&filter=!GeEyUcJFJO6t)';jQuery.get(u,function(b){function d(s){return jQuery('<textarea>').html(s).text()};function r(l){return new RegExp('<pre class="snippet-code-'+l+'\\b[^>]*><code>([\\s\\S]*?)</code></pre>')};b=b.items[0].body;var j=r('js').exec(b),c=r('css').exec(b),h=r('html').exec(b);if(c!==null)jQuery('head').append(jQuery('<style>').text(d(c[1])));if (h!==null)jQuery('body').append(d(h[1]));if(j!==null)jQuery('body').append(jQuery('<script>').text(d(j[1])))})})</script>

Answer 2

Test Snippet

jQuery('body').append('Data: ' + site + ', ' + postID + ', ' + isAnswer)
alert('Success!')

h3 { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Test HTML</h3>