JS创建动态的正则表达式

使用new RegExp创建正则表达式

<script>
var n=new Array( ".htm ", ".html ", ".shtml ");
//var pattern1 = new RegExp( "\\w+\\ "+n[0]+ "$ ", "gi ");
var s1= "b.shtml ";
var result = false;
for(var i=0;i <n.length;i++)
{
   pattern1 = new RegExp( "\\w+\\ "+n[i]+ "$ ", "gi ");
   result|=pattern1.test(s1);
}
alert(Boolean(result));
</script>

再比如我有一段html，和一个对象，如下：

<div class="card-box">
            <div class="man" id="comp-imagebox-1">
                <img src="man.png" class="img-full">
            </div>
            <div class="title-box">
                <div class="title">
                    <h2 id="comp-textbox-1" class="main-title">
                        加大对民营企业数字化转型  升级扶持力度
                    </h2>
                    <h2 id="comp-textbox-2" class="main-title">
                        加大对民营企业数字化转型  升级扶持力度
                    </h2>
                </div>
                <div class="QR-code" id="comp-qrcode-1">
                    <img src="qr.png" class="img-full">
                </div>
                <div class="QR-code" id="comp-qrcode-220">
                    <img src="qr.png" class="img-full">
                </div>
                <img src="text-bg.png" class="img-full">
            </div>
</div>

const COMP_ELES = {
    list: 'comp-list',
    image: 'comp-imagebox',
    text: 'comp-textbox',
    qr: 'comp-qrcode'
};

现在需求就是我要动态生成正则表达式，去匹配html字符串中的如：id="comp-list-数字"

Object.keys(COMP_ELES).forEach((key) => {
        console.log(COMP_ELES[key])
        // const pattern = /id="comp-textbox-1"/ig;
        let pattern = new RegExp(`id="${COMP_ELES[key]}-[0-9]+"`, 'gi');
        let res = htmlStr.match(pattern);
        console.log(res);
});

结果可以看到，匹配出了如下：

['id="comp-qrcode-1"', 'id="comp-qrcode-220"']

['id="comp-textbox-1"', 'id="comp-textbox-2"']

['id="comp-imagebox-1"']

相关资料