使用正则表达式替换类名

Question

我正在尝试将classList.replace()与正则表达式结合使用。我的目标是将 badge-something 之类的表达式替换为 badge-success 之类的其他值。

我已经尝试过了：

element.classList.replace(/badge-*/i, 'badge-success')

但是它返回 false ，并且什么也没有改变。我想念什么？

Answer 1

Element.classList是DOMTokenList（不是字符串）。

DOMTokenList.replace需要两个字符串，而不是正则表达式。第一个参数是您要替换的确切的类名。不支持模式。

如果要使用正则表达式，则需要一个字符串：

element.className = element.className.replace(/(^|\s)badge-\S+/g, '$1badge-success');

Answer 2

classList.replace将字符串作为参数，所以我认为这就是为什么它不起作用的原因。 但是您可以通过稍微扭曲代码来实现目标， 重复这些步骤

1. 首先使用该元素的所有className（使用element.className）
2. 将这些类拆分为数组（使用拆分功能--- classname.split（''））
3. 在数组上应用forEach循环，并使用str.search（'badge-'）> -1，使用element.classList.replace ....替换该className，虽然很简单，但是代码可以工作明确地

。 谢谢