Javascript正则表达式获取类名

Question

* 我已经搜索了堆栈溢出并尝试了所有类似问题的答案 *

我正在编写一个 Node 脚本:

1. 扫描目录中的 html 文件
2. 将文件内容读入字符串
3. 在字符串中搜索 ID 或类名

我正在使用正则表达式来查找 ID 或类名。当我搜索 id 时，我能够获得匹配项，但当我搜索类名时却无法获得匹配项。

这是我的示例代码:

https://jsbin.com/bayuquzulu/edit?js,console

为了简单起见，我将 html 放入变量中并省略了文件读取部分。

var html = '<section class="mb-4" id="button-test">'+
        '<button type="button" class="btn btn-primary">Primary</button>'+
        '<button type="button" class="btn btn-secondary">Secondary</button>'+
        '<button type="button" class="btn btn-success">Success</button>'+
        '</section>';

var scan = function(content) {

    var props = ['btn-primary', 'button-test'], res = {};

    for (var i = 0; i < props.length; i++) {
        var prop = props[i];

        var exps = [
            {key: '#', exp: new RegExp("<*.* id=([\"]|')\\s*"+prop+"\\s*([\"]|').*>", "gi")},
            {key: 'data-comp=', exp: new RegExp("<*.* data-dna=([\"]|')\\s*"+prop+"\\s*([\"]|').*>", "gi")},
            {key: '.', exp: new RegExp("<*.* class=([\"]|')*."+prop+".*([\"]|').*>", "gi")}
        ];

        for (var e = 0; e < exps.length; e++) {
            var item = exps[e];
            var key = item.key;
            var exp = item.exp;
            var match = content.match(exp);

            key += prop;

            if (match) {

                if (!res[key]) { res[key] = []; }

                res[key].push(match[0]);

            }
        }
    }

    return res;
}

console.log(scan(html));

Answer 1

我认为这可能是答案:

const data = `<section class="mb-4" id="button-test">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">
        Secondary
    </button>
    <button type="button" class="btn btn-success">
        Success
    </button>
</section>`

const elements = []

const findTag = /<[^\/].*?>/g
let element
while(element = findTag.exec(data)){
  element = element[0]
  const id = (element.match(/id="(.*?)"/i) || [, ""])[1]
  const classes = (element.match(/class="(.*?)"/i) || [,""])[1].split(' ')
  
  element = {}
  element["id"] = id
  element["class"] = classes
  elements.push(element)
}
console.log("All elements")
console.log(elements)

// You can now also filter elements
console.log("All elements having btn class")    
console.log(elements.filter(element => element.class.indexOf("btn") != -1))