Поисковая проблема

Question

HTML

<input type="text" id="#searchfor">
<p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</p>

КОД

$('#searchfor').keyup(function(){
     var page = $('#all_text');
     var pageText = page.text().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);
});

Привет, это работает до одной проблемы.Если я ищу LOREM, а затем удаляю его, это произойдет

TEXT

<span></span>L<span></span>o<span></span>r<span></span>e<span></span>m<span></span> ipsum

Вот оригинал jsFiddle .это работает нормально, но я хочу удалить все span , если поиск пуст, но я не знаю, как это сделать.Кто-нибудь может мне помочь?Спасибо!

Answer 1

Вы можете сохранить весь текст во временной переменной и использовать его, когда у вас пустое значение поля поиска: Вот пример этого.

//here we will store the original text only first time
var originalText ="";
$('#searchfor').keyup(function(){
         var page = $('#all_text');
         //storing the original text into variable
         if(originalText ===""){
         	originalText = page.text();
         }         
         var pageText = page.text().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);
         //replacing html if textbox has been cleared
         if($(this).val() === ''){
         	page.html(originalText);
         }
    });

#all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchfor"/>
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</p>