javascript - 匹配类中特定结尾之前的任何字符

Question

$(document).ready(function() {
          $('[class="any_character/s bgcolor-orange-10"').text(function(i, oldText) {
            return oldText === 'OK' ? 'Warning' : oldText;
          });
        });

我很难理解如何在 JavaScript 中处理类似 REGEX 的功能。 如何用实际上可能存在的多个字符或无字符替换“any_character/s”？

在我的特定示例中，这些类可以是:

1) class="bgcolor-green-10 bgcolor-blue-10 bgcolor-orange-10"

2) class="bgcolor-green-10 bgcolor-orange-10"

3) class="bgcolor-orange-10"

在每种情况下，它们之间的共同点是它们以:

bgcolor-orange-10

Answer 1

类属性不应被视为使用属性选择器构建、修改或搜索的字符串(您知道，看起来像 [class="something"] )。它只是元素上类的空格分隔的串联表示。其中类名的顺序并不重要，不应依赖。

如果要选择具有特定类的元素，请使用标准 .class-name 表示法，如下所示

$('.bgcolor-orange-10')

或直接使用 DOM API

document.getElementsByClassName('bgcolor-orange-10')

或

document.querySelectorAll('.bgcolor-orange-10')

但是，我很困惑为什么你的元素上最终出现了多个 bgcolor-COLOR-10 形式的类，从它们的名称来看它们似乎做了同样的事情和/或互相冲突。您可能需要退后一步并检查您的逻辑以了解为什么会发生这种情况。

这个问题与正则表达式无关。属性选择器中 value 的语法不是正则表达式模式，并且正则表达式不用于匹配这些值。即使您确实获得了 class 属性的值，也不应该使用正则表达式来检测特定类是否存在 - DOM API 和所有库都具有用于此目的的接口(interface)，例如 elt.classList.contains 或者，在 jQuery 中，.hasClass。如果您发现自己需要使用正则表达式，因为您已经构造了包含需要提取的神奇信息的类名，例如 data-bob-class 并且您想查看 “bob” 在那里，那么您应该重新审视您的类名称方法，因为类并不是真正设计用于以这种方式编码信息。