Как добавить счетчик, который покажет, сколько текстовых совпадений было найдено

Question

Как вы пишете в Javascript счетчик, который покажет, сколько текстовых совпадений было найдено или заменено? Я как бы застрял.

var haystackText = ""; 
 
function findMyText(needle, replacement) { 
 
    if (haystackText.length == 0) { 
 
      haystackText = document.getElementById("haystack").innerHTML; 
 
    } 
 
    var match = new RegExp(needle, "ig");  
 
    var replaced = ""; 
 
    if (replacement.length > 0) { 
 
      replaced = haystackText.replace(match, replacement); 
 
    } 
 
    else { 
 
      var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>"; 
 
      replaced = haystackText.replace(match, boldText); 
 
    } 
 
    document.getElementById("haystack").innerHTML = replaced; 
 
}

<div id="haystack"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<br> 
 
<table> 
 
<tr><td>Find</td><td><input id="needle" name="needle" type="text"></td></tr> 
 
<tr><td>Replacment</td><td><input id="replacement" name="replacement" type="text"></td></tr> 
 
</table> 
 
<input type="button" value="Find" onClick="findMyText(document.getElementById('needle').value, document.getElementById('replacement').value);"> 
 
► Run code snippetCopy snippet to answer

Answer 1

Использование match, чтобы найти длину найденных (и/или замененных) экземпляров термина поиска needle:

document.querySelector('input[type=button]').addEventListener('click', findMyText); 
 

 
function findMyText(e) { 
 
    var needle = document.querySelector('#needle').value; 
 
    var replacement = document.querySelector('#replacement').value; 
 
    var haystackText = document.querySelector('#haystack').textContent; 
 
    var match = new RegExp(needle, 'ig'); 
 
    var foundlen = (haystackText.match(match) || []).length; 
 
    //       ^use match 
 
    var replaced = ''; 
 
    if (replacement.length > 0) { 
 
      replaced = haystackText.replace(match, replacement); 
 
    } 
 
    else { 
 
      var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>"; 
 
      replaced = haystackText.replace(match, boldText); 
 
    } 
 
    document.querySelector('#haystack').innerHTML = replaced; 
 
    document.querySelector('#found').textContent = 
 
      ' ['+ needle + ']: ' + foundlen + ' found'; 
 
}

#found {color: red; font-weight: bold;}

<div id="haystack"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<br> 
 
<table> 
 
<tr><td>Find</td><td><input id="needle" name="needle" type="text"><span id="found"></span></td></tr> 
 
<tr><td>Replacment</td><td><input id="replacement" name="replacement" type="text"></td></tr> 
 
</table> 
 
<input type="button" value="Find">

Answer 2

попытки сосчитать желтый div, я добавляю к этому div класс, тогда i считать это работает здесь:

var haystackText = ""; 
 
var count = ""; 
 
function findMyText(needle, replacement) { 
 
    if (haystackText.length == 0) { 
 
      haystackText = document.getElementById("haystack").innerHTML; 
 
    } 
 
     
 
    var match = new RegExp(needle, "ig");  
 
    var replaced = ""; 
 
    if (replacement.length > 0) { 
 
      replaced = haystackText.replace(match, replacement); 
 
     
 
    } 
 
    else { 
 
      var boldText = "<div class='count' style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>"; 
 
      replaced = haystackText.replace(match, boldText); 
 
    } 
 
    document.getElementById("haystack").innerHTML = replaced; 
 
    var arr = document.getElementsByClassName("count") 
 
    count = arr.length 
 
    document.getElementById('founded').innerHTML = "The number of "+ needle+"is : "+ count; 
 
    //alert(count); 
 
}

<div id="haystack"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<br> 
 
<table> 
 
<tr><td>Find</td><td><input id="needle" name="needle" type="text"></td></tr> 
 
<tr><td>Replacment</td><td><input id="replacement" name="replacement" type="text"></td></tr> 
 
</table> 
 
<input type="button" value="Find" onClick="findMyText(document.getElementById('needle').value, document.getElementById('replacement').value);"> 
 
► Run code snippetCopy snippet to answer 
 
<div id="founded"></div>