Javascript 通过搜索查找文本并仅突出显示当前结果

尝试仅突出显示当前/单个文本，如浏览器“Control-F”键盘命令搜索。再次搜索良好时查找下一个/新文本。但它是高亮显示所有结果，试图只高亮显示当前结果/文本

JS如下：

$('body').on('keydown', '#searchfor', function(e) {
    if (e.which === 32 &&  e.target.selectionStart === 0) {
      return false;
    }  
});

//Create some vars to later check for: 
//['text you are searching', 'number of highlights','actual highlight']
var searching,
    limitsearch,
    countsearch;

$('button#search').click(function() {
    var searchedText = $('#searchfor').val();
    var page = $('#ray-all_text');

    //Now check if the text on input is valid
    if (searchedText != "") {
        //If the actual text on the input is different from the prev search
        if(searching != searchedText) {
            page.find('span').contents().unwrap();
            var pageText = page.html();
            var theRegEx = new RegExp("(" + searchedText + ")", "igm");
            var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
            page.html(newHtml);
            //Set your variables to the actual search
            searching = searchedText;
            limitsearch = page.find('span').length;
            countsearch=0;
        } else {
            //If it's the same of the prev search then move to next item instead of repaint html
            countsearch<limitsearch-1 ? countsearch++ : countsearch=0;
            console.log(countsearch+'---'+limitsearch)
        }
        //Go to target search
        $('body').animate({
          scrollTop: $("#ray-all_text span").eq(countsearch).offset().top - 50}, 
        200);
     } else {
        alert('empty search')
     }
});

<div class="ray-search">
  <div class="field" id="ray-search-form">
    <input type="text" id="searchfor" placeholder="what are you searching for?" />
    <button type="button" id="search">Press to Find!</button>
  </div>
</div>

<article id="ray-all_text">
  <p>
    This manual and web site, all information and data and photos contained herein, are the s...
  </p>
</article>

$（'body'）。关于（'keydown'，'#searchfor'，函数（e）{
if（e.which==32&&e.target.selectionStart==0）{
返回false；
}  
});
//创建一些变量，以便以后检查：
//[“您正在搜索的文本”、“高光数量”、“实际高光”]
var搜索，
有限搜索，
计数搜索；
$（“按钮搜索”）。单击（函数（）{
var searchedText=$（“#searchfor'）.val（）；
变量页=$（“#ray-all_text”）；
//现在检查输入上的文本是否有效
如果（searchedText！=“”）{
//如果输入上的实际文本与上一次搜索不同
如果（正在搜索！=searchedText）{
page.find（'span'）.contents（）.unwrap（）；
var pageText=page.html（）；
var theRegEx=new RegExp（“（“+searchedText+”），“igm”）；
var newHtml=pageText.replace（theRegEx，“$1”）；
html（newHtml）；
//将变量设置为实际搜索
搜索=搜索文本；
limitsearch=page.find（'span'）。长度；
countsearch=0；
}否则{
//如果与上一个搜索相同，则移动到下一个项目，而不是重新绘制html
countsearch您可以将一个类添加到当前目标。代码中的行I更改：

var actual = $("#ray-all_text span").eq(countsearch);
$('.active').removeClass('active');
actual.addClass('active');
$('body').animate({
   scrollTop: actual.offset().top - 50}, 
200);

在CSS上：

#ray-all_text span.active {
    background-color:yellow;
}

你想只突出显示第一个结果吗？是的………你正在搜索的是hi，谢谢，但第一个搜索是有效的，当搜索另一个文本（第二次）时，则无法找到：请查看我的网站：当搜索另一个文本（第二次）时，则是查找“绘图示例”（每次）找不到确切的文本。请检查：@Aariba您有此id
ray-all\u text
重复的id必须是唯一的，这可能会破坏JS