Как использовать метод match () с циклом for для нодлиста - PullRequest
Новая
       20

Как использовать метод match () с циклом for для нодлиста

1 голос
/ 29 марта 2019

Когда я собираю список узлов из p элементов и применяю простой шаблон регулярных выражений, используя метод match () в цикле for, я не получаю совпадений в своем тестовом HTML, который содержит известное совпадение.

Когда я использую один и тот же шаблон регулярных выражений для всего документа или строки, содержащей шаблон, который я ищу, я получаю совпадение. Doh!

Я продемонстрировал это в 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>

// результаты некоторые примерные адреса на странице: 

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 () найдет номер телефона в списке узлов, поскольку он зацикливается, но это не так.

Может кто-нибудь объяснить, пожалуйста?

1 Ответ

1 голос
/ 29 марта 2019

Проблема в том, что вы смотрите только на результат последнего совпадения в цикле. Поскольку у последнего 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);
}

Live Пример: 

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));
// ^^^^
}

Live Пример: 

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>
...