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>

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

2 个答案: