在前端开发中，我们经常需要对 HTML 元素进行增、删、改操作。其中，删除某个元素的类是一个常见的需求。本篇文章将详细介绍如何通过 JavaScript 删除以指定字符串开头的所有类，并提供示例代码和指导意义。
方法一：正则表达式
使用正则表达式可以轻松地删除以指定字符串开头的所有类。下面是一个实现：
function removeClassesStartingWith(element, prefix) {
const regExp = new RegExp(`\\b${prefix}\\S*\\b`, 'g');
element.className = element.className.replace(regExp, '');
}该函数接受两个参数：要操作的元素和要删除的类名前缀。首先，它会创建一个正则表达式，该正则表达式匹配以指定前缀开头的任何单词字符序列，例如 prefix-class1 和 prefix-class2。然后，它使用字符串的 replace() 方法替换该元素的类名列表中符合条件的所有类名为空字符串。
示例使用：
<div class="my-class1 prefix-class1 my-class2 prefix-class2"></div>
const element = document.querySelector('.my-element');
removeClassesStartingWith(element, 'prefix-');
// Result: <div class="my-class1 my-class2"></div>方法二：循环删除
还有一种不使用正则表达式的方法。该方法遍历元素的所有类名，检查每个类名是否以指定前缀开头，并在符合条件时将其删除。下面是一个实现：
-- -------------------- ---- -------
-------- ---------------------------------- ------- -
----- ------- - ------------------------- ---
--- ---- - - -- - - --------------- ---- -
-- ------------------------------- -
------------------- ---
-
-
----------------- - -------------- ---
-该函数首先将元素的类名列表拆分成一个数组，然后使用 for 循环遍历该数组中的每个类名。如果某个类名以指定前缀开头，则使用 splice() 方法删除它，并将循环变量 i 减一以确保不会错过后面的类名。最后，它使用 join() 方法将修改后的类名列表重新组合为一个字符串，并将其赋值给元素的 className 属性。
示例使用：
<div class="my-class1 prefix-class1 my-class2 prefix-class2"></div>
const element = document.querySelector('.my-element');
removeClassesStartingWith(element, 'prefix-');
// Result: <div class="my-class1 my-class2"></div>指导意义
以上两种方法都能够有效地删除以指定字符串开头的所有类。但是，由于正则表达式的执行效率较高，建议选用第一种方法。此外，在操作元素的类名时，建议遵循以下几点：
- 尽量避免频繁地操作 DOM。如果需要删除多个元素的类名，可以先将它们存储在一个数组中，然后一次性地对它们进行处理。
- 在修改元素的类名时，应该始终保留其它类名不变。这意味着在使用
replace()或splice()方法时，必须确保不会删除其它与前缀无关的类名。 - 如果要修改元素的多个类名，应该将它们合并为一个用空格分隔的字符串，并一次性将其赋值给元素的
className属性。这将比对元素的类名列表进行单独操作更加高效。
希望本文能够对你掌握这一实用技能有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10865
