如何<br>通过document.querySelector按顺序查找多个？

Question

如果我有多个<br>s的序列，我如何显示我有多少个序列?

换句话说，我试图计算<br><br>在连续两个
s中出现的次数。

// Undesired output:
console.log(document.querySelectorAll('br').length) // 8
console.log(document.querySelectorAll('br+br').length) // 7

<div id="test">
Paragraph 1
<br>
<br>
Paragraph 2
<br>Paragraph 2 continued
<br>
<br>
Paragraph 3
<br>Paragraph 3 continued
<br>
<br>
Paragraph 4
</div>

所需输出:

console.log(document.querySelectorAll('?????').length) // 3

Answer 1

您可以使用正则表达式查找<br><br>s:

var p = /<br>[rn]*<br>/g;
console.log([...document.querySelector('#test').innerHTML.matchAll(p)].length); // => 3

<div id="test">
Paragraph 1
<br>
<br>
Paragraph 2
<br>Paragraph 2 continued
<br>
<br>
Paragraph 3
<br>Paragraph 3 continued
<br>
<br>
Paragraph 4
</div>

Answer 2

我想不出更好的方法来做这件事，希望这对你有帮助!

const brTags = document.querySelectorAll('br')
let tagCount = 0;
for(let i = 0; i < brTags.length; i++){
const string = brTags[i].nextSibling.textContent
.replaceAll("n", "")
.trim();
if(string.indexOf("Paragraph") > -1 && string.length === 11){tagCount++}
}
console.log ("Tag count: ", tagCount);

<div id="test">
Paragraph 1
<br>
<br>
Paragraph 2
<br>Paragraph 2 continued
<br>
<br>
Paragraph 3
<br>Paragraph 3 continued
<br>
<br>
Paragraph 4
</div>

Answer 3

try this:

var nodes = document.querySelectorAll('br, div');
console.log(nodes);

<div id="test">
Paragraph 1
<br>
<br>
Paragraph 2
<br>Paragraph 2 continued
<br>
<br>
Paragraph 3
<br>Paragraph 3 continued
<br>
<br>
Paragraph 4
</div>