如何用JavaScript查找含指定词的类名并修改元素类名

直接在页面控制台执行以下代码即可实现需求效果：

document.querySelectorAll('[class*="selector"]').forEach(element => {
  element.className = 'picker';
});

代码逻辑说明 #

• 查找元素用了CSS属性通配选择器[class*="selector"]，可以直接匹配所有class属性值中包含selector子串的元素，不需要遍历全量DOM节点，执行效率更高。
• 直接给DOM元素的className属性赋值，会完全覆盖元素原有的所有类名，正好符合需求中把原有组合类名整体替换为picker的要求，不会残留blue/green/red这类原有类名。
• 类名不包含selector的元素（比如示例中的<div class="button">）不会被匹配选中，不会产生任何改动，和预期效果完全一致。

如果你的需求是追加类名而非全量替换，可以把赋值逻辑改为element.classList.add('picker')后再按需移除原有类，当前示例是全量替换场景，直接赋值className是最简洁的实现。

内容的提问来源于stack exchange，提问作者Cornel Verster