Here is the bare bones version, intended for quick use in other posts. To use it with preinitialized code and input you only need to copy the snippet and reassign the code and input variables in the first script tag. You'll unfortunately have to escape newlines and double quotes.:
BEGIN_CODE
// Put JavaScript code here
// it may be on multiple lines
END_CODE_BEGIN_INPUT
Put input here
it may be on multiple lines
END_INPUT
<!-- Ignore this lineInterpreter code:--><script>i=document.body.innerHTML;document.body.innerHTML=''</script><script>c=i.match(/BEGIN_CODE\n([\s\S]*)\nEND_CODE_BEGIN_INPUT/);c=c&&c.length>1?c[1]:'// Error reading code. Make sure it is on the lines between BEGIN_CODE and END_CODE_BEGIN_INPUT.';i=i.match(/END_CODE_BEGIN_INPUT\n([\s\S]*)\nEND_INPUT/);i=i&&i.length>1?i[1]:'Error reading input. Make sure it is on the lines between END_CODE_BEGIN_INPUT and END_INPUT.'</script>JavaScript:<br><tt>function(x) {</tt><br><textarea id='c'rows='4'cols='60'></textarea><br><tt>}</tt><br><br>Input string (variable x):<br><textarea id='i'rows='4'cols='60'></textarea><p><input type='button'value='Run'onclick='r()'></p>Output (return value):<br><textarea id='o'rows='4'cols='60'style='background-color:#f0f0f0;'></textarea><script>document.getElementById('c').value=c;document.getElementById('i').value=i;function r(){var r,c,i;r=c=i=null;eval('var f=function(x) {'+document.getElementById('c').value+'}');document.getElementById('o').value=String(f(document.getElementById('i').value))}</script>
The raw Markdown for including this Stack Snippet in a postanother question or answer is:
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
BEGIN_CODE
// Put JavaScript code <script>here
// it may be codeon =multiple "//PUTlines
END_CODE_BEGIN_INPUT
Put JAVASCRIPTinput CODEhere
it HERE"may be on multiple lines
END_INPUT
<!--Interpreter code:--><script>i=document.body.innerHTML;document.body.innerHTML=''</script><script>c=i.match(/BEGIN_CODE\n([\s\S]*)\nEND_CODE_BEGIN_INPUT/);c=c&&c.length>1?c[1]:'// Error reading inputcode. =Make "PUTsure INPUTit HERE"
is on the lines between BEGIN_CODE and END_CODE_BEGIN_INPUT.';i=i.match(/END_CODE_BEGIN_INPUT\n([\s\S]*)\nEND_INPUT/IGNORE);i=i&&i.length>1?i[1]:'Error EVERYTHINGreading BELOW
input. Make sure it <is on the lines between END_CODE_BEGIN_INPUT and END_INPUT.'</script>JavaScript:<br><tt>function(x) {</tt><br><textarea id='c'rows='4'cols='60'></textarea><br><tt>}</tt><br><br>Input string (global variable x):<br><textarea id='i'rows='4'cols='60'></textarea><p><input type='button'value='Run'onclick='r()'></p>Output (global variablereturn yvalue):<br><textarea id='o'rows='4'cols='60'style='background-color:#f0f0f0;'></textarea><script>document.getElementById('c').value=code;documentvalue=c;document.getElementById('i').value=input;functionvalue=i;function r(){var r=nullr,code=nullc,input=null;evali;r=c=i=null;eval('var f=function(x) {'+document.getElementById('c').value+'}');document.getElementById('o').value=String(f(document.getElementById('i').value))}</script>
<!-- end snippet -->
BelowTo use it simply copy it into a new post and put your code on the lines between BEGIN_CODE and END_CODE_BEGIN_INPUT, and your input on the lines between END_CODE_BEGIN_INPUT and END_INPUT. The interpreter will do the rest. Note that nothing needs to be indented.
I would argue that this BEGIN...END technique is presently the ungolfedbest way we have to write these interpreters in terms of ease of future use because...
- When rendered there is only one code block (the HTML one) and only one line of it is "extra".
- The user writing the snippet can see exactly where to place their code and input. They don't have to search for the appropriate textarea tag.
- Users reading the post can easily distinguish the code without even running the snippet. Of course when the snippet is run the code is obvious.
- It only breaks when the begin/end identifiers appear on their own lines within the code or the input. But this is unlikely, and they can be changed if absolutely necessary.
- It is self contained. All the code is right there. (I know this might be impossible for a larger interpreter but one of the points of Stack Snippets was to combat dead links to JSFiddle and such, so self-containedness is good.)
- It could be expanded to suit any number of (text based) inputs.
The snippet below is the non-minimized general version, complete with example and a bit more styling.
