Jupyter (IPython) notebook: Convert an HTML notebook to ipynb

Question

I have converted a Jupyter/IPython notebook to HTML format and subsequently lost the original ipynb file.

Is there a simple way to generate the original notebook file from the converted HTML file?

Answer 1

I recently used BeautifulSoup and JSON to convert html notebook to ipynb. the trick is to look at the JSON schema of a notebook and emulate that. The code selects only input code cells and markdown cells

here is my code

from bs4 import BeautifulSoup
import json
import urllib.request
url = 'http://nbviewer.jupyter.org/url/jakevdp.github.com/downloads/notebooks/XKCD_plots.ipynb'
response = urllib.request.urlopen(url)
#  for local html file
# response = open("/Users/note/jupyter/notebook.html")
text = response.read()

soup = BeautifulSoup(text, 'lxml')
# see some of the html
print(soup.div)
dictionary = {'nbformat': 4, 'nbformat_minor': 1, 'cells': [], 'metadata': {}}
for d in soup.findAll("div"):
    if 'class' in d.attrs.keys():
        for clas in d.attrs["class"]:
            if clas in ["text_cell_render", "input_area"]:
                # code cell
                if clas == "input_area":
                    cell = {}
                    cell['metadata'] = {}
                    cell['outputs'] = []
                    cell['source'] = [d.get_text()]
                    cell['execution_count'] = None
                    cell['cell_type'] = 'code'
                    dictionary['cells'].append(cell)

                else:
                    cell = {}
                    cell['metadata'] = {}

                    cell['source'] = [d.decode_contents()]
                    cell['cell_type'] = 'markdown'
                    dictionary['cells'].append(cell)
open('notebook.ipynb', 'w').write(json.dumps(dictionary))

here is part of print(soup.div) output

div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">
<img src="/static/img/nav_logo.svg?v=479cefe8d932fb14a67b93911b97d70f" width="159"/>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="active" href="http://jupyter.org">JUPYTER</a>
</li>
<li>
<a href="/faq" title="FAQ">
<span>FAQ</span>

A screen shot of the resulting ipynb file, loaded on my local jupyter and after running all the cells

Answer 2

Note the best answer may need some modification of the tags for it to work in late 2022 and forward

I'm adding this as an answer to highlight comments I made below the nice upvoted Answer.
Note that the current version of the awesome highly upvoted one won't probably work as the HTML tags signaling the various cells has changed. If you happen to have a really old version of HTML made, it may work. However, most of you will have have newer made HTML and you need the new tags to be in the code to distinguish the cells.

See my comments below that highly-voted on post (you'll need to click on 'Show more comments' option at the bottom to reveal all the comments) for a link to get a place you can run it in an active Juptyer session right in your browser, without needing to sign in, via MyBinder service with the updated version of the code with the current tags used. (See the fist code cell here for a direct source. The tags being different affects a few lines of the original code.

Answer 3

Here's a trick: Save the html file as a .txt file and then open it in your code editor. Then rename the file extension as .ipynb That should do the trick.