javascript - 如何添加一个计数器来显示找到了多少文本匹配项

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