-2

I have a website and I look for a way to replace all occurrences of a string, namely "#C50606" by "#2a6739" (a specific color appearing multiple times on a specific webpage of mine). In other words, I would like to access the content one can find by doing

Right click -> Show Page Source -> Resources

and then apply some replace function before the page loads.

The problem is I don't know the best way to do it: JS, CSS, ... ? I tried with this JS but it strangely only changed few occurrences and hid all the page widgets.

<script type="text/javascript">
var code = document.body.innerHTML;
document.body.innerHTML = code.split("#C50606").join("#2A6739");
</script>

Thanks for your help.

EDIT : the biggest problem seems to find an alternative to document.body.innerHTML.

ventatto
  • 11
  • 4
  • You use css and toggle classes to change the style... – Alon Eitan Feb 01 '21 at 11:25
  • innerHTML is serialisation of a fragment of a DOM, it is not an exact copy of the HTML used to create the DOM in the first place, i.e. the source. So going HTML -> DOM -> HTML -> DOM via the built–in parser and inneHTML is a digital version of the children's game [*Chinese whispers*](https://en.wikipedia.org/wiki/Chinese_whispers). – RobG Feb 01 '21 at 11:40
  • May I ask you whether there is any particular reason why you do not simply change the code in the HTML file rather than trying to replace it during runtime. Anyway, you cannot replace the code *before* the page loads. – secan Feb 01 '21 at 11:41
  • To be 100% sure of getting it right you need to change the source file(s) as @secan suggests and I guess they may be a combination of HTML, JS, CSS or something like PHP. It may be useful in doing so to use a CSS variable for the color, that way if it ever has to be changed again it only has to be changed in one place. – A Haworth Feb 01 '21 at 12:18
  • @AlonEitan yeah and since the color is related to the style, I thought CSS could help me. – ventatto Feb 01 '21 at 15:08
  • @RobG thanks for your explanation but I don't really get the solution with the built-in parser... – ventatto Feb 01 '21 at 15:21
  • @secan This is because the color changes I want to make are only for few specific pages (or more precisely posts in my case). I want to be able to add a short piece of code to an article I decide to create to say "In this one, #C50606 (default color of my website) will be #2A6739". – ventatto Feb 01 '21 at 15:21
  • @AHaworth Exact about the combination. The idea about the CSS variable for the color is interesting but changing it would not only change a specific page color, is it ? – ventatto Feb 01 '21 at 15:21
  • @ventatto Please include the relevant HTML (+CSS if it's relevant) so I could think of a solution – Alon Eitan Feb 01 '21 at 15:32
  • @ventatto you can add a CSS class to the container element of the posts you want to have a different color and set a CSS rule to overwrite the default. But again, you can do that in the code at development time rather than during runtime. Even because, if you followed good practices, you should **not** have inline styles therefore in the HTML page there should be no `style` attribute containing a `color` rule to replace. – secan Feb 01 '21 at 15:40
  • @AlonEitan [here is the page](https://www.saintlouisbasket.be/team-test/) where you can find all the related resources. – ventatto Feb 01 '21 at 15:41
  • @secan yes you're totally right but the problem is that the majority of the page is built from Sportspress plugin (and there are so much `!important` rules in the stylesheets) and from Suffusion theme for Wordpress. My understanding of the whole building architecture is limited and that's why I was looking for an overriding solution... – ventatto Feb 01 '21 at 15:49
  • You need to show a minimal example of what you're trying to do. Attempting to replace a string in attribute values in the source code after it's been parsed to a DOM is going be fraught. The page needs to be designed with modifying the colour from the start, adding that later will be a challenge. – RobG Feb 01 '21 at 22:06

1 Answers1

0

I am not sure about external files but with internal styles, it works. But the replacement happens after the page loads.

window.onload =  function () {
    var code = document.documentElement.innerHTML;
    document.documentElement.innerHTML = code.replace("#C50606", "#2A6739");
}
user12137152
  • 732
  • 1
  • 5
  • 14
  • Thanks for your help but, unfortunately, it does not even change one color instance... – ventatto Feb 01 '21 at 15:23
  • @ventatto, I am sorry. It should be `window.onload` instead of `document.onload`. Please review the answer again. – user12137152 Feb 01 '21 at 16:22
  • It seems to replace some #C50606 colors without hiding widgets but it creates a lot of bugs (no more dropdown menus, some pictures disappearing, ...) – ventatto Feb 01 '21 at 20:02
  • @ventatto—that's because getting an element's *innerHTML* involves serialising a DOM component that was created parsed from HTML + javascript + whatever else, then modifying it, then creating a DOM from that. Hence my comment above. It will also destroy any listeners added by script. – RobG Feb 01 '21 at 22:04
  • @RobG thanks for your last two comments. As I can understand through them, it is not a good idea to proceed like I want and there is no suitable solution. I will think about other ways to address the problem but thank you for your help. – ventatto Feb 02 '21 at 17:47