如何将 match() 方法与节点列表上的 for 循环一起使用

Question

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

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

我已经在这里用jsfiddle演示了它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}sd{3}sd{4}/gi);
}
var telString = "[e-mail] tel.. [phone]  postal address here";
var secondMatch = telString.match(/d{4}sd{3}sd{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: [phone]</p>
<p>Email: [e-mail]</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>

结果 页面中的一些示例地址详细信息：

Tel: [phone]
Email: [e-mail]
Address: New House Bedford Road Guildford Surrey GU1 4SJ
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
the nodelist
  0 Tel: [phone]
  1 Email: [e-mail]
  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

问题是你只看循环中最后一场比赛的结果。由于上一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}sd{3}sd{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}sd{3}sd{4}/gi);
}
var telString = "[e-mail] tel.. [phone]  postal address here";
var secondMatch = telString.match(/d{4}sd{3}sd{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: [phone]</p>
<p>Email: [e-mail]</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}sd{3}sd{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}sd{3}sd{4}/gi));
// ^^^^
}
var telString = "[e-mail] tel.. [phone]  postal address here";
var secondMatch = telString.match(/d{4}sd{3}sd{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: [phone]</p>
<p>Email: [e-mail]</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>