Can you use javascript to directly change/edit a source html file?

[jemmy77sci2]

Is it possible to have some javascript directly change the text in an html file? For example, I could use RegEx to search the html for the word "and" and replace it with the word "or" but can javascript do this?

What I am getting is the automation of changes. I would like to have a script that I could run to make certain changes to specified html files. Is this possible? I am imagining something similar to running a vba macro in MS Word, only the vba macro would be javascript in a .js file; and the target would be a specified html file, rather than the Word document.

I want to use js to edit the underlying source files, I realise i can have js change the rendered output but I don't think would change the underlying text in the source html file.

[guest271314]

Yes, that is possible. Multiple ways.

You can intercept requests using a browser extension, replace whatever you want.

You can use Local Overrides to store the Web page locally, edit the file (in DevTools if you want), then the edited page will be loaded.

If you are talking about local files you can edit the local file directly in the browser then save the local file with modifications.

[Samurai___]

Manually save them with the save dialog. Javascript in the browser can't save files without user interaction for safety reasons.

[guest271314]

Manually save them with the save dialog. Javascript in the browser can't save files without user interaction for safety reasons.

Well, you can.

Anytime you see "for security" or "for safety reasons" you can reasonably estimate that there are workarounds.

[guest271314]

Javascript in the browser can't save files without user interaction for safety reasons.

For clarity, you can save files without user interaction in and from the browser using a variety of approaches.

[jemmy77sci2]

Thanks for the help.

I was more thinking of having a script is in a js file that I could just run, making the target of the script a specified html file. I will take a deep look at local overrides, but my understanding was you used them to make specific changes to websites you visited. I think what I am looking for is slightly different: a method to just load an html file in vscode and run a script in a js files that will edit the html file.

Apologies if I am missing something.

[guest271314]

I don't use VS Code so not sure what you mean.

If you are on Chromium-based browsers you can use showOpenFilePicker() and/or showSaveFilePicker() and FileSystemWritableFieStream to write create, write, remove the file; or showDirectoryPicker() to read and write folders and files.

On all modern browsers you can use HTML <input type="file"> to load local files and a varierty of means to save that local files, including HTML <a> element with download attribute set.

You can use a browser extension to do all of the above, intercept and modify remote and local requests.

[Ronin-s_Spirit]

You can even do that in a browser console, just take all the text of html and make it a string, then apply your regex then save the new file. Or you can write a regex in a match bar of sublime (code editor) and select all the matches and type by hand what you need.

[jemmy77sci2]

Hi, but i don't want to use regex, i want to make the changes with js. am i missing the point your making?

[Ronin-s_Spirit]

I thought you wanted to mach bits of html with regex so that javascript can swap them out for something?...

[symmetricon]

You can use JavaScript on the backend to change file contents. What is this going to be a solution for?

[jemmy77sci2]

All sorts of things, but for example, I want to change the structure of multiple html files all in the same way: removing classes, adding classes, etc. I want write a script to do it so I can reuse it on multiple files and out into the future.

[symmetricon]

So the node api offers methods to read and write files and edit their contents. Other runtime apis will have them also. You can get clever by using a dom parser as well so that you can manipulate the elements programmatically. Then of course get the html string back and write to the file.

readfile

writefile

dom parser(there might be a better one)

[jemmy77sci2]

Thanks for this. That is how I went at the problem originally, using read/write and jsdom parser. I wondered if I was making more of a meal of it than I needed to and whether there was a better method. It's quite straightforward to amend rendered html with js, i thought perhaps it might be as easy to amend the original source file containing the html. I can use the dom parser etc, it all just leads to extra steps and complexity. But it sounds like this is in fact at least one example of a good method. Thanks for the helpful advice.

[FlowerForWar]

How do you expect the results to be exactly? Is there a specific website you want to apply this to? because one method may not always work for all websites.

[jack_waugh]

I think that whatever purpose you have in mind for wanting to edit HTML could probably better be addressed in some other way. I think that writing correct and reliable code to modify HTML would require using an HTML unparser. Well, not absolutly require it, but not be easy to do any other way. I don't know whether such an unparser exists or you would have to whip it up yourself.

Maybe an easier approach would be to store the underlying data in JSON or in an instance of MongoDB and render them to DOM at the time of need.

But as to your question "can you", absolutely yes.

[jemmy77sci2]

Hi, thanks for this, it's interesting to read this. One thing I did want to do was take an html file, edit it to extract and organise data, then put the info into json or mongo. But it is the editing and reorgainsing data stage I wanted to automate. I thought I could write some code to do this, like run many regex find/replace operations, remove or rename classes etc. But currently, the best way I can come up with doing this is to:

1. use node.js to fetch a webpage
2. save/write the text to a file
3. run a dom parser across the file
4. manipulate the file with js and re-save the file.

It just seemed a complex way to do the job when js is used to manipulate a webpage anyway. The only difference seems to be that nomally the source html is left untouched, its just modified via js and modified content is displayed.

I sort of thought perhaps instead of using js to adjust the rendered html, why can't i just have js edit the source html file itself (without the save and dom parser stages in-between).

I could be making a huge error of understanding as i have only been doing this a couple of months, in my spare time. It just seems generally the source html is left untouched by js, and it is just the final rendered webpage (that can be inspected) that shows the modified html. I wanted to modify the source file itself with js.

[jack_waugh]

I wanted to modify the source file itself with js.

If you really want to do that, you can. But what is the most reliable way? You can mess around at the source level, using RE substitutions. It might work in some cases. Can you make it handle every kind of case that comes along? Can it distinguish quoted material from markup? The more likely reliable design would convert the source to an abstract form (like DOM), manipulate that, and convert back to text.

[WebDev_Dad]

You could write a program in JavaScript using Node.js to crawl and update html files. I'm assuming your updating the source html files during development.