Question

我有一个HTML文件，其中div具有类名。我需要找到具有给定类的确切集合的div。 但是问题是我不知道在div中编写类的顺序。例如：

给出课程列表：1、2、3

HTML（简体）

<div id="test" class="1 2 3"></div> #A match! since it contains classes 1 2 3
<div id="test" class="3 2 1"></div> #A match! since it contains classes 1 2 3
<div id="test" class="2 1 3"></div> #A match! since it contains classes 1 2 3
<div id="test" class="1 2 3 4"></div> #not a match since it contains other classes than 1, 2, 3
<div id="test" class="1 2 3 5 6"></div> #not a match since it contains other classes than 1, 2, 3

任何建议都将不胜感激！

编辑：HTML文本（例如在我的示例中）不需要有效。它可以包含具有相同ID或未封闭div的多个div。

Answer 1

请注意，单个文档中的重复ID是无效的HTML。如果您可以控制源，最好改用类。

考虑使用DOMParser，然后检查每个元素的classList，而不是正则表达式（在处理HTML解析时，它们通常笨拙且笨拙）：

const input = `
<div id="test" class="1 2 3">m1</div> #A match! since it contains classes 1 2 3
<div id="test" class="3 2 1">m2</div> #A match! since it contains classes 1 2 3
<div id="test" class="2 1 3">m3</div> #A match! since it contains classes 1 2 3
<div id="test" class="1 2 3 4">m4</div> #not a match since it contains other classes than 1, 2, 3
<div id="test" class="1 2 3 5 6">m5</div> #not a match since it contains other classes than 1, 2, 3
`;
const doc = new DOMParser().parseFromString(input, 'text/html');
const matchingDivs = Array.prototype.filter.call(
  doc.querySelectorAll('div'),
  ({ classList }) => (
    classList.contains('1') &&
    classList.contains('2') &&
    classList.contains('3') &&
    classList.length === 3
  )
);
console.log(matchingDivs);

Answer 2

正则表达式不是正确的方法。您要按div的类集进行匹配-即，给定输入集中的类的交集与div的类集匹配：

const findDivsWithClasses = classes => {
  const classesSet = new Set(classes.split(' '));
  return [...document.getElementsByTagName('div')].filter(div =>
    div.classList.length === classesSet.size && [...div.classList].every(className => classesSet.has(className)));
}

console.log(findDivsWithClasses('1 2 3'));

<div id="test" class="1 2 3"></div> #A match! since it contains classes 1 2 3
<div id="test" class="3 2 1"></div> #A match! since it contains classes 1 2 3
<div id="test" class="2 1 3"></div> #A match! since it contains classes 1 2 3
<div id="test" class="1 2 3 4"></div> #not a match since it contains other classes than 1, 2, 3
<div id="test" class="1 2 3 5 6"></div> #not a match since it contains other classes than 1, 2, 3

如何在模式顺序未知的情况下匹配正则表达式

2 个答案: