Question

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

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

我已经在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}\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

问题在于您仅查看循环中最后个匹配项的结果。由于最后一个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>

如何在节点列表上使用match（）方法和for循环

1 个答案: