Question

如何在Javascript中编写一个计数器，显示找到或替换了多少文本匹配？我有点卡住了。

<nav>
  <ul>
    <li id="button_1"><a class="lnk" href="#1">link1</a></li>
    <li id="button_2"><a class="lnk" href="#2">link2</a></li>
    <li id="button_3"><a class="lnk" href="#3">link3</a></li>
  </ul>
  <div class="handle"></div>
</nav>
<p id="hai"></p>

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;
}

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添加到一个类然后我算上它在这里工作：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: