Mass delete specific tags which appear for every line with epubeditor

[yuzucitrusx]

hi hiii, i'm here to request for a epubeditor script to mass delete these specific h2, paragraph AND span style tags that appear for every paragraph on the site -- https://exiledrebelsscanlations.com/, from this original request: dteviot/WebToEpub#1040

i just copied the image from the previous issue and pasted it here too for reference!

thank you again! :D

[shonetypto]

There’s actually a way to remove all those tags in Calibre or VSC using Regex.

http://stackoverflow.com/questions/43577528/ddg#43578165

its really simple and once you get the hang of it, it takes seconds to clean up epubs.

[yuzucitrusx]

@shonetypto

ahhh I'm really not that much of a technical person so I don't know what regex is? I see that mode in Calibre but I dunno how to use it haha, I always preferred using the scripts in epubeditor because it's instantaneous effect with rooting out all possible cases fast 😅 but thank you very much for your help!

[shonetypto]

You just enter it in the “find & replace” bar and it finds the code you want to remove. Keep the replace box empty and it will remove what you want for the entire epub.

The link above is very beginner friendly and already gives you the code. You just have to replace h1 with the codes displayed above. Or you can shorten/change them.

[dteviot]

@yuzucitrusx

This is the script you need

let toChange = [...dom.querySelectorAll("h2, p, span")];
for(let s of toChange) {
    s.removeAttribute("style");
}
return 0 < toChange.length;

How to understand this

"h2, p, span"

is a CSS selector that says: all <h2> <o> & <style> tags.
(Look up CSS on the internet to explain this.)

let toChange = [...dom.querySelectorAll("h2, p, span")];

Says: create a list of all <h2>, <p> & <style> tags and call that list "toChange"

for(let s of toChange) {
}

Says: take each item in the list called "toChange", and do something with it.
Call the item you are currently doing something with "s"
The "do something" goes between the curly brackets.

    s.removeAttribute("style");

This says remove the style attribute from the something called "s"

So

for(let s of toChange) {
    s.removeAttribute("style");
}

Says, remove the style attribute from every tag in the list "toChange"

return 0 < toChange.length;

This is boilerplate. What it's doing is telling EpubEditor if any tag was changed. EpubEditor needs to know if anything was changed, so it can write the changes.

For my notes: 32 minutes work.

[yuzucitrusx]

@dteviot

thank youuuuuu!!! also for the explanation because i was able to delete other tags and their attributes too!! except i couldn't make it work for the "div" tag haha, but the main issue has been resolved! thanks!!!

@shonetypto

and thank you for your input on an alternative method!! i'll give this a shot in calibre too!!

[dteviot]

@yuzucitrusx

i couldn't make it work for the "div" tag

Please provide an example

[yuzucitrusx]

Please provide an example

@dteviot

AH i'm sorry! it was my error with a misplaced variable in the script that i had written incorrectly. but it works properly now for the div tag too! thank you again for your help and explanation!! :D

[dteviot]

You are welcome.
Although doing this means

1. With you able to do more, I'll need to do less.
2. In future, I can point other people at this, so they can self help.

[yuzucitrusx]

ahhhh im sorry for the bother again, but i actually made another error that wrecked my epub instead. it had actually worked before, but now i cant rewrite the script to do the same thing, about deleting both the tags and the text within the tags as well. probably because there are so many other unnecessary tags i deleted that it affected the span tags too...

example span style tag i wanted deleted, these tags are purposed to hide text in black colour within the actual chapters and are basically nonsense for copy protection:

<span style="color:#000000">text is here, please delete me too.</span>

ahh but because the text written in the tags are all different for literally every single occurrence, it's hard to delete manually since there are hundreds...

also, the epub i'm editing has other span tags with other attributes too which are <span class> & <span id>, but those i don't want affected at all and only want to delete these specific <span style="color:#000000"> tags. because when i processed the epub in the editor, i kind of removed all span tags in general :'(

[dteviot]

@yuzucitrusx

To delete the entrie element, including inner content, use the remove() method. https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

Note, if you'd like to see what elements the script is removing, you can add a console.log() command and open the console tab under the developer tools.

To select those span elements, you will want to use an attribute selector. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

So, the CSS should be

span[style="color:#000000"]

However, the line in the script needs to enclose the CSS in quotes. And the selector has quotes.
So, to solve this, you have to put a slash in front of the quotes in the CSS.

So, whole script should be

let toChange = [...dom.querySelectorAll("span[style=\"color:#000000\"]")];
for(let s of toChange) {
    console.log(s);
    s.remove();
}
return 0 < toChange.length;

Note, I have not tested this script.
If this doesn't work. Drop me a small epub (say 2 or three chapters) with the problem and I'll figure it out.

[yuzucitrusx]

ahhhhh thank you so much again for another explanation, i can now try with other tags with a similar problem! it worked super amazing!! thank you!!! <3