如何用 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
最佳答案
使用 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">
关于javascript - 如何添加一个计数器来显示找到了多少文本匹配项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34577748/