How to run PHP in Javascript (browser)?

Question

This is not another of those questions, this is about parsing and interpreting PHP in the browser with JS.

How can you run PHP in JavaScript? I am not asking about running PHP in the server and then send the resulting string to the browser as JavaScript. I am literally talking about JavaScript parsing and running PHP.

This might be useful in many places:

An express Node.js app that has to use a PHP module.
A small REPL for the browser that does not need a whole VM per instance. Ideal for learning PHP.
Making a template engine for a static site constructor.

I've searched around and found php-parser and babel-preset-php, but nothing to run it. Ideally I'm looking for something like this, though I couldn't find anything through Google/SO/etc:

// No server needed, "just" Javascript parsing PHP
alert(php(`<?= "Hello world" ?>`));

If you know a better way than my own answer, please feel free to share it! I'm very curious about what the community thinks.

It was not my intention, link to my blog removed! I think this question/answer can stand on their own and might be interesting to the community :) — Francisco Presencia
– Francisco Presencia, Commented Nov 18, 2018 at 5:56

Francisco Presencia · Accepted Answer · 2018-11-18 06:13:37Z

It is possible! Using the two libraries mentioned in the question, dissect babel-preset-php and reuse some parts to transpile PHP to Javascript, and then eval the Javascript. Here is a working demo, feel free to write some basic PHP in the <textearea> and press run to run the PHP in the browser:

const $ = sel => document.querySelector(sel);
$('#horrible').addEventListener('submit', e => {
  e.preventDefault();
  eval($('#horrible textarea').value);
});

body, html {
  margin: 0;
}

textarea {
  line-height: 1.5;
  margin: 0;
  height: 2.1em;
  padding: .3em .6em;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: .2em;
  transition: all 0.3s;
  width: 90%;
}

button {
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: .3em .9em;
  vertical-align: middle;
  background: #0074d9;
  color: #fff;
  border: 0;
  border-radius: .2em;
  width: auto;
  user-select: none;
  margin: .3em 0;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: .2em;
  height: auto;
  box-shadow: 0 0 rgba(0,0,0,0) inset;
}

<form id="horrible">
<textarea style="min-height:150px">const vars = { icon: &#x27;&#x1F389;&#x27; };
const out = php(&#x60;&#x3C;?= &#x22;for fun! &#x22;.$icon ?&#x3E;&#x60;, vars);
alert(out);</textarea>
<button data-tooltip="Are you sure? Like, 100%? There is no coming back">EVAL()</button>

<script src="https://francisco.io/blog/running-php-in-javascript/php.min.js"></script>

Here is the actual code snippet used to build the php.js file linked above:

import parser from 'php-parser';
import translator from './translator';
import generator from '@babel/generator';

const run = (code, opts) => {
  // Make a closure so that `out` doesn't collide with the PHP variables:
  let out = '';
  // Define `echo` since it's used in the transpiled JS code for some reason
  opts.echo = opts.echo || (str => out += str);
  // Pretend this is safe. Pro tip: IT IS NOT SAFE
  new Function(...Object.keys(opts), code)(...Object.values(opts));
  return out;
}

export default function (src, opts = {}) {
  const ast = new parser().parseCode(src);
  const file = translator.translateProgram(ast);
  const code = generator(file).code;
  return run(code, opts);
};

Jayakumar · Accepted Answer · 2018-11-18 06:00:18Z

0

if you want to write something in jsvascript . Then it is necessary the javascript code should be in php file i.e. if file name is temp.php

and javascript code should be in script tag.

eg. test.php (your php filename)

<html>
    <head>
        <script>
            function myFunc(){
                alert('<?php echo date("Y/m/d"); ?>');
            }

        </script>
    </head>
</html>

The above code alerts the date. The above date is a php date function.

Initially, The php server executes the above code and treat JS code as plain text.

and will looks like below when it comes to client/ browser

<html>
    <head>
        <script>
            function myFunc(){
                alert("2018/06/30");
            }

        </script>
    </head>
</html>

answered Nov 18, 2018 at 6:00

Jayakumar

3214 silver badges5 bronze badges

3 Comments

Madhur Bhaiya Over a year ago

The question is not about running PHP in the server. Generally developers knows how to do that.

Francisco Presencia Over a year ago

I understand a similar but different question has been asked thousands of times before, but please re-read the question. It's not one of those! I just highlighted the difference. I am asking how to parse and run PHP in Javascript. I also provide an answer of my own on how to do it.

user149341 Over a year ago

Except your answer doesn't "parse and run PHP in Javascript". Your PHP runs on the server and happens to output Javascript.

Collectives™ on Stack Overflow

How to run PHP in Javascript (browser)?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related