jquery - Search-by-tag results returned on a single line -
i searching text <div>
tag. problem when search, <div>
data come 1 line.
here fiddle. http://jsfiddle.net/fc4sg/
in fiddle, type break press search. why don't <div>
contents keep formatting?
here's code:
var searchindex = -1; var searchtermold =''; $(document).ready(function(){ $('.searchbox').on('change',function(){ if($(this).val()===''){ var selector = "#realtimecontents"; $(selector+' span.match').each(function(){ $(this).replacewith($(this).html()); }); } searchindex = -1; $('.searchnext').attr("disabled", "disabled"); $('.searchprev').attr("disabled", "disabled"); searchtermold = $(this).val(); }); $('.searchbox').on('keyup',function(){ var selector= "#realtimecontents"; if($(this).val()===''){ $(selector+' span.match').each(function(){ $(this).replacewith($(this).html()); }); } if($(this).val() !== searchtermold){ $(selector+' span.match').each(function(){ $(this).replacewith($(this).html()); }); searchindex = -1; $('.searchnext').attr("disabled", "disabled"); $('.searchprev').attr("disabled", "disabled"); } }); $('.search').on('click',function(){ if(searchindex == -1){ var searchterm = $('.searchbox').val(); if(searchterm==''){ pg_alert("please insert text.") return; } searchandhighlight(searchterm); } else searchnext(); if($('.match').length >1){ $('.searchnext').removeattr("disabled"); $('.searchprev').removeattr("disabled"); } }); $('.searchnext').on('click',searchnext); $('.searchprev').on('click',searchprev); }); function searchandhighlight(searchterm) { if (searchterm) { var searchtermregex, matches; var selector= "#realtimecontents"; $(selector+' span.match').each(function(){ $(this).replacewith($(this).html()); }); try { searchtermregex = new regexp('('+searchterm+')', "ig"); } catch (e) { return false; } $('.highlighted').removeclass('highlighted'); matches = $(selector).text().match(searchtermregex); if (matches !==null && matches.length > 0) { var txt = $(selector).text().replace(searchtermregex, '<span class="match">$1</span>'); $(selector).html(txt); searchindex++; $('.match:first').addclass('highlighted'); if($('.match').eq(searchindex).offset().top > $(window).height()-10){ $(document).scrolltop($('.match').eq(searchindex).offset().top); } return true; }else{ pg_alert('search not found.'); } return false; } return false; } function searchnext(){ searchindex++; if (searchindex >= $('.match').length) searchindex = 0; $('.highlighted').removeclass('highlighted'); $('.match').eq(searchindex).addclass('highlighted'); if($('.match').eq(searchindex).offset().top > $(window).height()-10){ $(document).scrolltop($('.match').eq(searchindex).offset().top); } } function searchprev(){ searchindex--; if (searchindex < 0) searchindex = $('.match').length - 1; $('.highlighted').removeclass('highlighted'); $('.match').eq(searchindex).addclass('highlighted'); if($('.match').eq(searchindex).offset().top > $(window).height()-10){ $(document).scrolltop($('.match').eq(searchindex).offset().top); } }
the problem line:
var txt = $(selector).text().replace(searchtermregex, '<span class="match">$1</span>');
you not preserving html tags part of original text. when retrieve .text(), getting result has of tags removed. fix this, need use html of text instead:
var txt = $(selector).html().replace(searchtermregex, '<span class="match">$1</span>');
Comments
Post a Comment