通过搜索找到下一个文本并突出显示不起作用 [英] Find next text by search and highlight not works

问题描述

在搜索框中搜索任何文本时，可以找到并突出显示正确的文本，但搜索下一个/新文本时，无法找到下一个/新文本，再次搜索时不起作用，我无法找到问题。下面的 JS 。

JS

<$ p $点击（功能（）{
var page = $（'＃ray-all_text'）;
var pageText = page.html （）< / span>）;
var searchingText = $（'＃searchfor'）。val（）;
var theRegEx = new RegExp（（+ searchingText +），igm）;
var newHtml = pageText.replace（theRegEx，< span> $ 1< / span>）;
page.html（newHtml）;
$（'html，body'）。animate（{
scrollTop：$（＃ray-all_text span）。offset（）。top}，2000 ）;
}）;

HTML

 < div class =ray-search> 
< div class =fieldid =ray-search-form> 
< input type =textid =searchforplaceholder =你在搜索什么？ /> 
< button type =buttonid =search>按下查找！< /按钮> 
< / div> 
< / div> 
 
< article id =ray-all_text> 
< p> 
本手册和网站，包含在此的所有信息和数据以及照片均为... 
< / p> 
< / article> 
  

请检查现场示例： https://jsfiddle.net/gaezs6s8


为什么会发生这种情况？是否有解决方案？

解决方案

我的建议是在更改所有 .html （）在你想要避免意外行为并改进功能的文本中。

首先进行验证以避免将'space'作为输入的第一个值，这将让我们稍后检查输入内部是否有实际值。

（'keydown'，'#searchfor'，函数（e）{
if（$'$ $ $ $ $ $ $'$ $ $ $ $ $ $'$'$'$' （e.which === 32& e.target.selectionStart === 0）{
return false;
}
}）;

代码从这个答案

---

现在请检查您的代码的评论：

  //创建一些变量以便稍后检查：
 // ['您正在搜索的文本'，'突出显示的数量'，'实际突出显示' ] 
 var搜索，
 limitsearch，
 countsearch; 
 
 $（'button＃search'）。click（function（）{
 var searchingText = $（'＃searchfor'）。val（）; 
 var page = $ （'＃ray-all_text'）; 
 
 //现在检查输入文本是否有效
 if（searchingText！=）{
 //如果实际（搜索！=搜索文本）{
 page.find（'span'）。contents（）。unwrap（）; 
 var pageText = page.html（）; 
 var theRegEx = new RegExp（（+ searchingText +），igm）; 
 var newHtml = pageText.replace（theRegEx，< span> $ 1 < / span>）; 
 page.html（newHtml）; 
 //将变量设置为实际搜索
 searching = searchedText; 
 limitsearch = page.find（ 'span'）。length; 
 countsearch = 0; 
} else {
 //如果它与prev搜索相同，则移动到下一个项目而不是重新绘制html 
 countsearch< limitsearch-1？ countsearch ++：countsearch = 0; 
 console.log（countsearch +'---'+ limitsearch）
} 
 //转到目标搜索
 $（'body'）。animate（{
 scrollTop：$（＃ray-all_text span）。eq（countsearch）.offset（）。top  -  50}，
 200）; 
} else {
 alert（'空搜索'）
} 
}）; 
  

---

JqueryDemo

When search any text on search box, it can be find and highlighted the correct text, but when search next/new text, it's unable to find the next/new text, it's not working when search again, i'm unable to find the issue. The JS below.

JS

$('button#search').click(function() {
 var page = $('#ray-all_text');
   var pageText = page.html().replace("<span>", "").replace("</span>");
    var searchedText = $('#searchfor').val();
    var theRegEx = new RegExp("(" + searchedText + ")", "igm");
    var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
    page.html(newHtml);
  $('html, body').animate({
  scrollTop: $("#ray-all_text span").offset().top }, 2000);
});

HTML

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

Please check the live Example: https://jsfiddle.net/gaezs6s8
Why is this happening? Is there a solution?

解决方案

My suggestion is to make a few validations before change all the .html() inside the text you want to avoid unexpected behaviors and improve the functionality.

First make a validation to avoid the 'space' as the first value on the input, this will let us later check if the input has a real value inside.

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

Code from this answer

---

Now Please check the comments on your code:

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

---

JqueryDemo

这篇关于通过搜索找到下一个文本并突出显示不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！