Javascript Jupyter Notebook How to get code cell content?

Question

(There is a similar question here, but it is about using python code to read markdown cells. I want to use JavaScript (for example in a Jupyter Notebook front end extension) to read the source code in code cells.)

I want to perform an analysis on the code. However, if I simply inspect the DOM of a Jupyter Notebook, it turns out to be a true DOM nightmare of nested divs (probably half of them redundant):

As we can see here, each character of the source code is in its own element. Naturally I am not very keen to pull all that stuff out of its tags and concat it again just to get the code of a code cell. Is there some easy way to get the source code of a cell?

Maybe some Jupyter JS API function? (How does the notebook itself actually get the code it sends to the kernel? There should be something already doing this job.) Or some little piece of jQuery code, which is very clever about getting all the contents?

One alternative I can think of is to somehow intercept the code cells content before the kernel evaluates it in the backend, but I also don't know how to do that yet and it would require outputting HTML, which contains JS with an immediately executed function in the output of the code cell, when it is run. This could also get complicated, if I want the actual code's output and the output of the code analysis in the output of the code cell. Maybe it is less complicated than I think, but so far it seems better to grab the code on the JS side, if there was some easy way to get it...

Answer 1

Take a look at the Juypter cell.js file here - it lists the functions Jupyter itself uses to interact with cells. In particular, the function get_text() will return the content of a cell. (this works on all types of cells - take a look at the codecell.js file for functions specific to code cells only)

A quick way to test this out in the browser - access the global Jupyter object's notebook instance to get the first cell of the notebook:

var cell = Jupyter.notebook.get_cell(0);

Now that we have the cell - we can read the code within it! Use:

var code = cell.get_text();

EDIT: you can save this result to a Python variable using the Javascript function to execute Javascript in a Python cell and IPython.notebook.kernel.execute to execute Python in Javascript - this is used to set the variable with the code name. Note you have to escape characters like quotes to I use encodeURI to perform URI encoding/decoding.

from IPython.display import Javascript
import urllib.parse

Javascript("const code = Jupyter.notebook.get_cell(0).get_text(); IPython.notebook.kernel.execute(`myvar = '${encodeURI(code)}'`);")
urllib.parse.unquote(myvar)