Saving a JavaScript based website to html files, keeping format - javascript

I've searched to the best of my capabilities, haven't found an answer.
I'm trying to save pages like this:
http://www.folkbibeln.it/?book=1joh&chapter=1&verse=1
To separate html pages, and keeping the format. I could take each page, copy, paste in a word processing software and save as html, but it would take hours upon hours. I'm thinking there might be some code I could use to automate it? I just can't figure it out, since it's not acting like a straight up html site.
Python is the language I'm using generally.

As an brute-force approach you could use a Headless Browser to load each page for you and save it to a file.
But as mplungjan already mentioned, all texts are in js-files.
You could save these files to your disk, then take the script that builds the html-page and write a little nodejs script that builds all the html-files for you. (Take the original script as a template.)
But nodejs ain't python
Depending on what you're trying to do with the texts, it ain't hard to convert these js-files into JSON and parse it, or directly into a python datastructure that you can import and process in some script of your choice.
Edit:
On a second Look, I just saw this: http://www.folkbibeln.it/chapters/1joh1.html
There seem to be the files you want as plain html, you just have to download them.

All the text is in JS files. You load the URL you gave us. Click ctrl-s and choose Web page complete. Then you will have ALL the text in the folder 1 Joh 1 – Svenska Folkbibeln_files You cannot save as formatted text unless you render the JS in the js files

Related

Is there any way to edit a local file through a web page without running server software?

I've a web working on a web page that's basically just a big table of links. I use javascript to read from a text file, parse it, and create a table based on that.
I'd like to be able to have a button on the page to add new a row of links and add them to the text file (or another file type if it's better).
I know you can accomplish this with php, node.js, and others, but all the methods I've found require server software to be running. Is there any way around this? For example, is there a way to use javascript to call a python script, or any other way?
The page is just for personal use, so I'd like to avoid running server software just to use it if possible. I know you can set it to download a text file, and you can save it in the same location, but I'd also like to avoid that.
From the research I've done, it doesn't seem possible, but I just thought I'd ask before I give up. Thanks in advance.
You can only read from files locally in browser with javascript.
This would be a huge security vulnerability if scripts in browsers could write files to your machine.

P5Js modifying local file such as json or xml or table

P5Js allows you write a json/table/xml file on the disk but I couldn't find a way to modify the existing file.
There is way through which you can open a local file[json/table/xml] in P5js and there is another way thought which you can write/create a file on local disk but I couldn't found how to modify a local file or add a new entry in the existing local json or table or xml file.
P5.Js
P5.Js write a file
P5.Js loadFile
P5.Js Table
reference
I do found some example to this but they are using different technologies
Link
You can.
If you want to use the browser, you have two options:
Use saveTable(), saveJSON(), etc. which will download a file. (Press the edit button in the reference snippet, hit run see what I mean)
Try localstorage for small pieces or data, or use a database otherwise (may require a wee bit of server-side scripting)
With option 1 you'd have a loop like this:
load the file (file browse dialog or drop the file onto the browser (there's a p5.js example for that))
parse and modify the file in p5.js
save/download the file from p5.js
Other options may include using a wrapper for your js code into an application.
As you've mentioned, app.js/electron.js/cordova/etc. will provide options.
It might be worth trying node.js since there already is a p5.js node.js tutorial out there
You can't. (Edit: You can't, unless you do something more complicated like George's answer.)
Think about how scary it would be if JavaScript could modify files on your hard drive. Any time you visited a website, all of the kitten pictures you have might be deleted!
Depending on what you want to do, you might be able to use cookies. Or you might have to create a database and save to that. Or a server. The point is, it's not as simple as modifying a file on the user's computer.
If you really need to modify a file on the user's computer, then you can't use JavaScript. You can use regular Processing in Java mode and deploy as an application, but you can't embed that in a webpage.

Include html files in an html file on a local file system?

I have a help system that is completely offline, no server, using file://.
I have one main page, with hundreds of line of html that represent many sections of the help system. I would like to stick each section in a html file and just include it. Unfortunately it seems like this is only possible with some nifty server side include techniques, with HTML5 (which I do not want to assume my users have), or with a nasty javascript hack where you copy your html file into js files with document.write calls for every line as written about here: Ways to include html in html.
What about something like handlebars.js or mustache.js? Can I use templating?
Since you don't want to use server-side includes, I would suggest using a static site generator (SSG).
If you are not familiar with SSG's, they allow you generate HTML pages from templates & includes (often Handlebars templates) and HTML, Markdown, JSON, or YAML, content using a CLI.
If you want to get started with an SSG, there are plenty of options, from Ruby based Jekyll, or Node.js based Assemble. In my opinion, Assemble is the best option and I would highly recommend it.

Send Information inside a .png image then extract it through javascript?

After searching around in Google for a while I have not had any luck or guidance in my question.
I want to be able to load up a website using javascript, ajax, in order to reduce the amount of requests needed by the server from the client. My goal is to embed/encode data within an image such that only the client needs to request this image through ajax call, and then be decoded to find the js, css, and other files needed. Then the js, css and other files will be inserted into the DOM.
If I can get the above to work then I could have a lot of flexibility on how my webapp is loaded and be able to notify the user how close the webapp is to being ready for viewing.
Currently my problem is that I cannot find how I would encode the data within an image.
Even if this is not the way to be going about serving up a webapp my curiosity is getting the best of me and I would just really like to do this.
Any guidance or pointers would be greatly appreciated!
Also: I am learning Python so if you know of a python module that I could play with that would be cool. Currently i'm playing with the pypng module to see if this could be done.
To be frank. Don't do that.
The brightest minds on earth use other methods to keep the number of requests and response time down. The most common technique for minimizing the number of requests is called Bundling. In short, you just copy'n paste all js files after each other into one big js file and all the css files into one big css file. This way you need to download two files, one js and one css. Better than that is usually not worth the trouble.
To further keep response times down you usually minify your js and css files. This is a process where all white space, comments, etc are removed and internal variable names are made as short as possible.
Finally you can serve both js and css files as gziped files to further reduce the file size to transfer.
There are many tools out there that does both bundling and minification for you. Google and pick one that suits your other tooling support.

Automated method to add javascripts/css into local html files and execute them

I have a set of html files needed to be modified locally. So I found an easy way to do that: write javascript/css, attach them into existing html, run them in a web browser, and save the results back to html files. The problem is I have a very large set of html files to be processed. So I need an automation.
I would love to know how this task should be addressed. I found that there is an automated testing tool like Watir, but still wonder if this is the right option for the problem.
Specifically I use jQuery to easily parse and modify html pages dynamically. This is the reason I don't want to do it otherwise with, for example, Java which lacks support of good libraries for html parsing.
A "headless browser", like Phantom JS may help you.

Categories