如何在节点列表上使用带有 for 循环的 match() 方法

Question

当我收集 p 元素的节点列表并在 for 循环中使用 match() 方法应用简单的正则表达式模式时，我在包含已知匹配项的测试 HTML 中没有得到任何匹配项。

当我在整个文档或包含我正在寻找的模式的字符串上使用相同的正则表达式模式时，我得到了一个匹配项。呸！

我已经在jsfiddle here中演示过了 https://jsfiddle.net/rusty1642/fdcmn81h/

我尝试使用 paraText[i].innerHTML.match()，但无济于事。我尝试简单地匹配已知字符串，如 (/email/gi)，我尝试组合 'g' 和 'i' 限定符。依然没有。

var demo = document.getElementById('demo');
var paraText = document.querySelectorAll('p');
var listing = [];
for(var i=0;i<paraText.length;i++) {

listing += i+' '+paraText[i].textContent + '<br>';

var firstMatch = paraText[i].textContent.match(/\d{4}\s\d{3}\s\d{4}/gi);

}

var telString = "help@yay.com tel.. 0330 122 6000  postal address here";
var secondMatch = telString.match(/\d{4}\s\d{3}\s\d{4}/gi);

demo.innerHTML = listing;
demo.innerHTML +='<br>1 match with nodelist';
demo.innerHTML +='<br> result =>  '+firstMatch;
demo.innerHTML +='<br>2 match with simple string';
demo.innerHTML +='<br>result =>  '+secondMatch;

<div>some SAMPLE address details in a page</div>
<p>Tel: 0330 122 6000</p>
<p>Email: help@yay.com</p>
<p>Address: New House Bedford Road Guildford Surrey GU1 4SJ</p>
<hr>
<div>
<b>the nodelist</b>
</div>
<div id="demo">nothing yet</div>

//结果页面中的一些 SAMPLE 地址详细信息：

Tel: 0330 122 6000
Email: help@yay.com
Address: New House Bedford Road Guildford Surrey GU1 4SJ
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
the nodelist
  0 Tel: 0330 122 6000
  1 Email: help@yay.com
  2 Address: New House Bedford Road Guildford Surrey GU1 4SJ

1 match with nodelist
   result => null
2 match with simple string
   result => 0330 122 6000

我希望 match() 方法在循环遍历时在节点列表中找到电话号码，但它没有。

谁能解释一下？

Answer 1

问题是您只查看循环中 last 匹配的结果。由于最后的 p 没有文本，自然是 null.

也许您想在找到匹配项时停止循环，请参阅评论：

var demo = document.getElementById('demo');
var paraText = document.querySelectorAll('p');
var listing = [];
var firstMatch = null; // <=== Moved declaration
for (var i = 0; !firstMatch && i < paraText.length; i++) {
// Added -------^^^^^^^^^^^^^^^

  listing += i + ' ' + paraText[i].textContent + '<br>';

  firstMatch = paraText[i].textContent.match(/\d{4}\s\d{3}\s\d{4}/gi);
}

实例：

var demo = document.getElementById('demo');
var paraText = document.querySelectorAll('p');
var listing = [];
var firstMatch = null; // <=== Moved declaration
for (var i = 0; !firstMatch && i < paraText.length; i++) {
// Added -------^^^^^^^^^^^^^^^

  listing += i + ' ' + paraText[i].textContent + '<br>';

  firstMatch = paraText[i].textContent.match(/\d{4}\s\d{3}\s\d{4}/gi);
}

var telString = "help@yay.com tel.. 0330 122 6000  postal address here";
var secondMatch = telString.match(/\d{4}\s\d{3}\s\d{4}/gi);

demo.innerHTML = listing;
demo.innerHTML += '<br>1 match with nodelist';
demo.innerHTML += '<br> result =>  ' + firstMatch;
demo.innerHTML += '<br>2 match with simple string';
demo.innerHTML += '<br>result =>  ' + secondMatch;

<div>some SAMPLE address details in a page</div>
<p>Tel: 0330 122 6000</p>
<p>Email: help@yay.com</p>
<p>Address: New House Bedford Road Guildford Surrey GU1 4SJ</p>
<hr>
<div>
<b>the nodelist</b>
</div>
<div id="demo">nothing yet</div>

或者，如果您想要一组尝试匹配每个段落的结果：

var matches = []; // <=====
for (var i = 0; i < paraText.length; i++) {

  listing += i + ' ' + paraText[i].textContent + '<br>';

  matches.push(paraText[i].textContent.match(/\d{4}\s\d{3}\s\d{4}/gi));
// ^^^^
}

实例：

var demo = document.getElementById('demo');
var paraText = document.querySelectorAll('p');
var listing = [];
var matches = []; // <=====
for (var i = 0; i < paraText.length; i++) {

  listing += i + ' ' + paraText[i].textContent + '<br>';

  matches.push(paraText[i].textContent.match(/\d{4}\s\d{3}\s\d{4}/gi));
// ^^^^
}

var telString = "help@yay.com tel.. 0330 122 6000  postal address here";
var secondMatch = telString.match(/\d{4}\s\d{3}\s\d{4}/gi);

demo.innerHTML = listing;
demo.innerHTML += '<br>matches with nodelist:';
demo.innerHTML += matches.map(function(match) { return "<br>result => " + match; });
demo.innerHTML += '<br>match with simple string';
demo.innerHTML += '<br>result =>  ' + secondMatch;

<div>some SAMPLE address details in a page</div>
<p>Tel: 0330 122 6000</p>
<p>Email: help@yay.com</p>
<p>Address: New House Bedford Road Guildford Surrey GU1 4SJ</p>
<hr>
<div>
<b>the nodelist</b>
</div>
<div id="demo">nothing yet</div>

如何在节点列表上使用带有 for 循环的 match() 方法

How do I use match() method with a for loop over a nodelist

javascript

regex

nodelist