Javascript （jQuery）列出为正则表达式定义的CSS类；使用特定的CSS避免安全错误

我有一个在app.CSS中定义的CSS类列表

在jQuery中，我需要一个方法，该方法将调出当前可用的所有.eventcolor-*并将它们添加到数组中

问题是，对于这项任务，这里有一个公认的解决方案：

---

是否有一种安全的方法将搜索限制为只搜索给定的CSS？

您可以使用对象的属性将样式表过滤到循环中，您可以通过这些属性进行迭代

考虑到您正在将样式表作为一个示例，它可能看起来像：

function getClassNamesByPattern(pattern) {
    var pattern = "eventcolor-*";
    var selectors = {};

    for (var i = 0; i < document.styleSheets.length; i++) {
        var stylesheet = document.styleSheets[i];
        if (typeof stylesheet.ownerNode !== 'undefined') {
            // This is stylesheet linked from external source
            var ownerNode = stylesheet.ownerNode;
            if (typeof ownerNode.tagName === 'string' && ownerNode.tagName.toLowerCase() === 'link' && ownerNode.rel === 'stylesheet') {
                // This is stylesheet linked through <link rel="stylesheet">
                var href = ownerNode.href;
                // Testing for filename match, you can update it to match your needs
                if (!href.match(/\/app\.css$/)) {
                    // Not inside our stylesheet - skip it
                    continue;
                }
            }
        }
        var classes = stylesheet.rules || stylesheet.cssRules;
        for (var x = 0; x < classes.length; x++) {
            if (undefined !== classes[x].selectorText && null !== classes[x].selectorText.match(new RegExp('\\.' + pattern.replace(/([^\s])\*/, '$1[^ ]+'), 'g'))) {
                selectors[classes[x].selectorText] = classes[x].selectorText;
            }
        }
    }

    return Object.keys(selectors);
}

---

我还发现了一个简单的方法：

document.styleSheets[i].href包含当前正在检查的CSS的名称

---

因此，我们可以检查document.styleSheets[i].href.indexOfapp.css！=-1

您的问题与jQuery没有任何关系，考虑用DOMDON替换jQuery标签，删除jQuery TAG感谢。我还发现document.styleSheets[I].href包含当前CSS的名称，因此我可以直接检查它。

function getClassNamesByPattern(pattern) {
    var pattern = "eventcolor-*";
    var selectors = {};

    for (var i = 0; i < document.styleSheets.length; i++) {
        var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
        for (var x = 0; x < classes.length; x++) {
            if (undefined !== classes[x].selectorText && null !== classes[x].selectorText.match(new RegExp('\\.' + pattern.replace(/([^\s])\*/, '$1[^ ]+'), 'g'))) {
                selectors[classes[x].selectorText] = classes[x].selectorText;
            }
        }
    }

    return Object.keys(selectors);
}

SecurityError: The operation is insecure.

function getClassNamesByPattern(pattern) {
    var pattern = "eventcolor-*";
    var selectors = {};

    for (var i = 0; i < document.styleSheets.length; i++) {
        var stylesheet = document.styleSheets[i];
        if (typeof stylesheet.ownerNode !== 'undefined') {
            // This is stylesheet linked from external source
            var ownerNode = stylesheet.ownerNode;
            if (typeof ownerNode.tagName === 'string' && ownerNode.tagName.toLowerCase() === 'link' && ownerNode.rel === 'stylesheet') {
                // This is stylesheet linked through <link rel="stylesheet">
                var href = ownerNode.href;
                // Testing for filename match, you can update it to match your needs
                if (!href.match(/\/app\.css$/)) {
                    // Not inside our stylesheet - skip it
                    continue;
                }
            }
        }
        var classes = stylesheet.rules || stylesheet.cssRules;
        for (var x = 0; x < classes.length; x++) {
            if (undefined !== classes[x].selectorText && null !== classes[x].selectorText.match(new RegExp('\\.' + pattern.replace(/([^\s])\*/, '$1[^ ]+'), 'g'))) {
                selectors[classes[x].selectorText] = classes[x].selectorText;
            }
        }
    }

    return Object.keys(selectors);
}