Javascript 按模式重命名所有HTML、CSS和JS中的所有选择器（为选择器添加前缀）

我有一个静态网站：HTML、CSS、JS文件和无后端编程。此网站的部分内容将被注入另一个网站。所以我需要确保我的项目中的新CSS文件不会损坏旧的CSS文件，反之亦然

我需要做的一件事是重命名所有选择器，如下所示：

<button class="button">

到

和

.button {
    background: blue;
}

$('.button').on('click');

到

最好是用大口喝或postsss，但任何其他方法也可以。有没有什么可吞咽的插件？到目前为止，我只找到了CSS

---

谢谢。

这只适用于CSS部分，但我不认为有一种自动方式可以满足您的需要：

我会尝试另一种方法。我相信你的网站会放在一个容器里。如果它是一个iframe，你就不会有任何碰撞的危险-不需要做任何事情

若要确保在另一个HTML文档中包含内容时不会发生冲突，请执行以下操作：

将所有*.css文件重命名为*.scss

创建一个新文件“includes.scss”，其中将包含所有重命名的css文件（确保顺序正确）：

。我的网站{
@导入（“header.scss”）；
@进口（“main.scss”）；
@导入（“footer.scss”）；
}

---

这将把所有包含的文件放在一个类上下文中，因此包含的规则只影响

.my website

容器中的元素。

使用文本编辑器重命名。为什么不使用notepad++replaceALL函数？嗯。。。有很多代码和很多不同的选择器。你做到了吗？@Balasivagnam现在我在我的代码中看到了这一点。尝试用谷歌搜索这些插件。我的任务已经解决了，但我记不起我的解决方案有多“好”。我仍然有一种不好的感觉：）

var name=require（'gulp-rename'）；var返工=要求（'gulp-reward'）；var reworkNPM=要求（返工-npm）；var classPrefix=require（'rework-class-prefix'）不，不会是iframe。将有正常的网页，他们将有来自两个项目的组件。感谢您将其包装到我的网站中，但同样，它对我的情况没有帮助。CSS实际上是一个最简单的部分。我发现要添加前缀。还有一个问题需要补充！重要的属性（它将解决相反的问题）和所有其他东西。但到目前为止，我没有看到HTML或JS。
.my-button {
    background: blue;
}

$('.button').on('click');

$('.my-button).on('click');