<style type='text/css'> .highlighted { background-color:yellow; } .emptyBlock1000 { height:1000px; } .emptyBlock2000 { height:2000px; } </style> <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> <script type='text/javascript'>//<![CDATA[ $(function(){ function searchAndHighlight(searchTerm, selector) { if(searchTerm) { //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters var selector = selector || "#bodyContainer"; //use body as selector if none provided var searchTermRegEx = new RegExp(searchTerm,"ig"); var matches = $(selector).text().match(searchTermRegEx); if(matches) { $('.highlighted').removeClass('highlighted'); //Remove old search highlights $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>")); $('.match:first').addClass('highlighted'); $('#next').on('click',i=1, function() { $('.match').removeClass('highlighted'); $('.match').eq(i).addClass('highlighted'); if( i >= $('.match').length -1) { i=0; } i=i+1; }); if($('.highlighted:first').length) { //if match found, scroll to where the first one appears $(window).scrollTop($('.highlighted:first').position().top); } return true; } } return false; } $(document).ready(function() { $('#search-button').on("click",function() { if(!searchAndHighlight($('#search-term').val())) { alert("No results found"); } }); }); });//]]> </script>
O problema é que ao invés de adicionar a classe na palavra dentro do link ele adiciona na url, deixando ela quebrada. Tem um link de exemplo aqui. Alguém poderia me ajudar? Obrigado!