将任何对象的类名中的下划线替换为短划线

Question

我想要一个javascript调用(jQuery OK)来改变类似这样的东西

<div class="demo pass_no def_yes">.. </div>
...
<ul class="me lien_u lis__y"> ... </ul>

至

<div class="demo pass-no def-yes">.. </div>
...
<ul class="me lien-u lis--y"> ... </ul>

将下划线(_)替换为短划线(-)

对象可以是任何dom对象。带下划线的类是从另一个系统生成的，不能从我这一端修改，而CSS框架(同样不能修改)在类名中使用破折号。

Answer 1

可以使用.querySelectorAll选择具有带下划线的类的所有元素，并将这些类替换为连字符。

​

document.querySelectorAll("[class*='_']")
  .forEach(el => el.className = el.className.replace(/_/g, "-"))

.foo-bar-baz {
  color: green;
}

.foo_bar_baz {
  color: red;
}

<div class=foo_bar_baz>GREEN</div>

​

Answer 2

使用document.querySelectorAll('*')遍历所有元素，然后使用String.prototype.replace(/_/g, '-')更新每个DOM节点的className：

​

document.querySelectorAll('*').forEach(element => {
  element.className = element.className.replace(/_/g, '-');
  if (element.className.trim()) {
    console.log(element.tagName, '->', element.className);
  }
});

<div class="demo pass_no def_yes">
  <div class="demo pass_no def_yes"></div>
  <ul class="me lien_u lis__y"></ul>
</div>
<ul class="me lien_u lis__y"></ul>

​