querySelectorAll Regex with variable

Question

我需要将一个元素与带有两个变量行、站点的属性字符串匹配。该属性是"数据测试"。格式为

data-test = "siteQtySOMETEXTrow=xxSOMETEXTsite=yySOMETEXT

我认为最简单的方法是使用正则表达式，使用新的正则表达式

我有 2 个问题 1( 构造正则表达式和 2( 将正则表达式传递到 querySelectorAll

var mystr = "\b" + "siteQty" + "\b.*\brow=" + myrow + "\b.*\site=" + mysite + "\b";
 console.log("mystr = "+mystr);
//=>  mystr = bsiteQtyb.*brow=10b.*site=1b
 var myreg = new RegExp("'" + '[data-test^='+ '"' + mystr + '"' + "]" + "'");
 console.log("myreg after = "+myreg);
//=>  myreg after = /'[data-test^="bsiteQtyb.*brow=10b.*site=1b"]'/
 var mycells = document.querySelectorAll(myreg);
  console.log("I found "+mycells.length+" of "+ myrow + "," + mysite + "data-test");  
//=> nothing

我想我已经找到了大部分解决方案，但它不起作用。

是正则表达式吗？还是将

正则表达式传递到查询中？还是别的什么？

Answer 1

我的猜测是，我们希望从字符串中捕获三个变量，为此我们只需使用具有三组的表达式，就像

：

^siteQty(.+?)row=(.+?)site=(.*)$

我们将编写其余问题的脚本。

如有必要，我们可能会(.+?)替换这些组，并包括其他边界。

演示 1

例

const regex = /siteQty(.+?)row=(.+?)site=(.*)/gm;
const str = `siteQtySOMETEXTrow=xxSOMETEXTsite=yySOMETEXT
`;
let m;
while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

布尔匹配

console.log(/^siteQty(.+?)row=(.+?)site=(.*)$/.test('siteQtySOMETEXTrow=xxSOMETEXTsite=yySOMETEXT'));

为了在我们的值输入中捕获小写和大写，我们可以使用以下表达式：

^siteQty(.+?)row=(([a-z]+)([A-Z]+?))site=(([a-z]+)([A-Z]+))$
^siteQty(.+?)row=(([a-z]+)([A-Z]+))site=(([a-z]+)([A-Z]+))$

const regex = /^siteQty(.+?)row=(([a-z]+)([A-Z]+?))site=(([a-z]+)([A-Z]+))$/gm;
const str = `siteQtySOMETEXTrow=xxSOMETEXTsite=yySOMETEXT
 siteQtySOMETEXTrow=xxSOMETEXTsite=yySOMETEXT
iteQtySOMETEXTrow=xxSOMETEXTsite=yySOMETEXT
`;
let m;
while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

演示 2

Answer 2

因此，最终我为行和列设置了带有虚拟占位符的字符串，然后使用字符串函数替换了虚拟的 xx/yy 值。然后将所有三个选择器放入querySelectorAll

      var myq_col = "[data-test*='site=xx']" ;
      var myq_col = myq_col.replace("xx",window.myred_col);
      var myq_row = "[data-test*='row=xx']" ;
      var myq_row = myq_row.replace("xx",window.myred_row);
      var myq_site = "[data-test^='siteQty']" ;
      console.log(" removing red @ ",myq_col + "|" + myq_row);
            var myadd= document.querySelectorAll(myq_site+myq_col+myq_row);