A file is referenced a lot, I want to change name, can I automatically update all the places it was referenced to the new name?

Question

Imagine that you have an image which is referenced in multiple HTML documents and for whatever reason you want to change it's name or position, do you have to go and update the source to the new name and path in every single place it had been referenced? Is there any way to automatically do that? I already had an idea about how to go about doing this, I was thinking I could perhaps link a JavaScript file to every single HTML document, check all images and update the ones matching the src that the image previously had, I guess this should worked, but it would take me some time to link the JavaScript file to every single HTML document, is there perhaps any way I could automatically link the JavaScript file to every HTML document? So I don't have to do it one by one?

Answer 1

Karak10,
1) Install Python official interpreter by the link given above, if you are on Windows; it is still preferred to do on Mac OS and Linux, despite it can be built-in.
2) Copy-paste my code to your text editor and save it with ".py" suffix (or save in ".txt" and then rename); if you are on Linux, then add the line with "#!/usr/bin/env python3" at the top before saving.
3) Try to click on the file; if it does not work, then open command line and type "python3 " followed by the path to that Python code.
4) The script has been run; now you need to follow the displayed instructions (enter string to be replaced, then string to replace with, then path to files (if the script is in the same directory as your HTML file, then you can simply give the name of the file) one-by-one, then press Enter to stop the program (blank input)).
This is the best way I thought of to solve your problem (maybe, it could be better using Shell script, but I do not know how to write Shell scripts as of now).

Answer 2

Karak10 A text editor with a search and replace function would speed this up.
Once you move the pictures to a new folder. All you'd have to do is search for ./ and then use replace all, with ./images/ or whatever the location is to instantly change the location of all the images in the document to the proper location with a single click.
Sublime Text, Notepad++, or VScode has such a feature.

Answer 3

How about reading every file as a string and finding img tag and replacing it with new name and writing back to file ?

Answer 4

OK (I still can remove it if moderator or professional Q&A'er will warn me):
https://code.sololearn.com/cDt72MO2m8vt/?ref=app
Note: you need Python interpreter (if it is not built-in) to run this on your device: https://python.org/downloads

Answer 5

Can I give the script (will it be appropriate under the SoloLearn Discuss (Q&A) rules)?

Answer 6

Why would you need to rename the source file to change the position of an image?
Can you explain what exactly you are trying to achieve?

Answer 7

Chris C. I didn't know VSC had that feature, I will try this out.

Answer 8

get you can publish the code in playground and send the link

Answer 9

get I don't know Python, could you explain what exactly your code does before I try running it? I have a folder for example, with an image, and five HTML documents, the image has been referenced multiple times in all the HTML documents, how would I use your code to rename the image and update the name in all places it was referenced?

Answer 10

Chris C. let's say I have 10 images in a folder, and two HTML documents, and those images are being used in various places in those HTML documents, if I wanted to create a folder and put all my images inside so that they are seperated from the HTML documents, for organization reasons, then they wouldn't be found where the were previously referenced, since they would not be inside the same folder with the HTML elements anymore I would have to add the path inside the src tag like this src="./images-folde/image.png". I have a lot of images, and a lot of HTML documents, and I want to move every image into a folder and somehow update the src attribute of all img tags that were referencing those images to the new path of the images.