在运行时替换我网站特定页面中所有出现的字符串[重复]答案

【问题标题】：Replace all occurrences of a string at runtime in a specific page of my website [duplicate]在运行时替换我网站特定页面中所有出现的字符串[重复]
【发布时间】：2021-05-05 13:51:55
【问题描述】：

我有一个网站，我正在寻找一种方法来替换所有出现的字符串，即用“#2a6739”（在我的特定网页上多次出现的特定颜色）替换“#C50606”。换句话说，我想访问可以通过以下方式找到的内容

右击 -> 显示页面来源 -> 资源

然后在页面加载之前应用一些replace 函数。

问题是我不知道最好的方法：JS，CSS，...？我尝试了这个 JS，但奇怪的是它只改变了很少的情况并隐藏了所有的页面小部件。

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

感谢您的帮助。

编辑：最大的问题似乎是找到document.body.innerHTML 的替代品。

【问题讨论】：

您使用 css 和切换类来更改样式...
innerHTML 是 DOM 片段的序列化，它不是最初用于创建 DOM 的 HTML 的精确副本，即源代码。因此，通过内置解析器和 inneHTML 进行 HTML -> DOM -> HTML -> DOM 是儿童游戏Chinese whispers 的数字版本。
请问您是否有任何特殊原因，您不只是更改 HTML 文件中的代码，而是尝试在运行时替换它。无论如何，您无法在页面加载之前替换代码。
要 100% 确定正确，您需要按照@secan 的建议更改源文件，我猜它们可能是 HTML、JS、CSS 或 PHP 之类的组合。这样做时使用 CSS 变量作为颜色可能很有用，这样如果必须再次更改它，只需在一个地方进行更改。
@AlonEitan 是的，由于颜色与样式有关，我认为 CSS 可以帮助我。

标签： javascript html css replace

【解决方案1】：

我不确定外部文件，但对于内部样式，它可以工作。但替换发生在页面加载后。

window.onload =  function () {
    var code = document.documentElement.innerHTML;
    document.documentElement.innerHTML = code.replace("#C50606", "#2A6739");
}

【讨论】：

感谢您的帮助，但不幸的是，它甚至不会更改一个颜色实例...
@ventatto，对不起。它应该是window.onload 而不是document.onload。请再次查看答案。
它似乎在不隐藏小部件的情况下替换了一些#C50606 颜色，但它会产生很多错误（没有更多的下拉菜单，一些图片消失了......）
@ventatto——这是因为获取元素的 innerHTML 涉及序列化从 HTML + javascript + 其他任何内容解析创建的 DOM 组件，然后对其进行修改，然后从那。因此，我在上面发表了评论。它还将销毁脚本添加的所有侦听器。
@RobG 感谢您的最后两个 cmets。正如我通过他们所了解的那样，按照我的意愿进行操作并不是一个好主意，并且没有合适的解决方案。我会考虑其他解决问题的方法，但感谢您的帮助。