数组或部分中的 Javascript 字符串

Question

我有一个包含多个值的 Javascript 数组:

var filterClasses = ['col-sm-12', 'hidden-xs', 'hidden-sm', 'hidden-lg', 'hidden-md', 'active', 'btn-'];

我有一个函数可以获取 DOM 中的所有 css 类。但我想检查是否应该将此类添加到新数组中。所以我可以为此使用 indexOf:

return filterClasses.indexOf('col-sm-12');

这会返回一个 true，所以这个类应该被忽略。

但现在我有一个 btn-primary 类。正如您在我的数组中看到的那样，我在其中添加了 btn-。我想排除所有包含单词 btn- 的类。我怎样才能做到这一点？

当前函数:

function setupShouldAddClass( cssClass, filterClasses )
{
    // If the cssClass exists in the filterClasses then false
    if ( filterClasses.indexOf(cssClass) > 0 )
    {
        return true;
    }

    filterClasses.forEach(function ( item )
    {
        if ( stringContains(item, cssClass) )
        {
            return true;
        }
    });

    return false;
}

function stringContains( needle, haystack )
{
    return (haystack.indexOf(needle) !== -1);
}

Answer 1

也许您可以使用正则表达式 而不是命令式代码来解决您的问题:

var classBlackListRegExp = /(col-sm-12|hidden-xs|hidden-sm|hidden-lg|hidden-md|active|^btn-.+)/i;

var result = classBlackListRegExp.test("btn-whatever");

console.log(result);

检查 ^btn-.+ 部分。这匹配任何以 "btn-" 开头的内容。

我相信您的场景是正则表达式的理想用例!

OP 关注类黑名单是否非常大

OP 说:

what im wondering is, that if i add more then 100 classes, how does this handle the line breaks?

您可以加入整个黑名单字符串数组并使用它创建一个 RegExp 对象，如下所示:

// I use a templated string and String.prototype.join
// to create a regular expression from a given array:
var classBlackListRegExp = new RegExp(`(${[
  'col-sm-12', 
  'hidden-xs', 
  'hidden-sm', 
  'hidden-lg', 
  'hidden-md', 
  'active', 
  '^btn-.+'
].join("|")})`, "i");

var result = classBlackListRegExp.test("btn-whatever");

console.log(result);