JQuery search in a static links page with highlighting the found word without breaking the list

Question

After previewing this post, Searching for jQuery in a static HTML page with highlighting of the found word , I finally found what I was looking for. However, the search seems to violate other HTML tags. I know that this was not intended for my exact requirements, but I am looking for some help.

Here is an example HTML:

$('#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); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <input type="text" id="searchfor" /> <ul id="all_text"> <li><a href="/somewhere">Somewhere</a></li> <li><a href="/somewhere-else">Over there</a></li> </ul> 

After entering the search field, the <li> tags and <a> tags are deleted. I am not very sure about Javascript or JQuery, so I can not figure it out myself. It should save the list and hyperlinks, but only search in visible text (i.e. Do not search in the href field).

All input is welcome.

Answer 1

So, I think the solution to your problem is that you only need to get the contents of the anchors you want to highlight. Here follows jsfiddle: https://jsfiddle.net/kimaescobar/k83j7Lqv/1/ but basically I created a class in searchable anchors, than I get all searchable ones that are inside the all_text object:

HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <input type="text" id="searchfor" /> <ul id="all_text"> <li><a class="searchable" href="/somewhere">Somewhere</a></li> <li><a class="searchable" href="/somewhere-else">Over there</a></li> </ul> 

CSS

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

Js

 $('#searchfor').keyup(function(){ var $page = $('#all_text .searchable'); $page.each(function(i,a){ $a = $(a) $a.html($a.html().replace(/<em>/g,"").replace(/\<\/em\>/g,"")) }) var searchedText = $('#searchfor').val(); if(searchedText != ""){ $page.each(function(i,a){ $a = $(a) var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<em>$1</em>") $a.html(html) }) } }); 

obs: I changed from span to em, because semantically in html5, when you want to highlight something that you use strong or em (depending on the selected semantics).

Answer 2

Since my editing was rejected. It is not entirely clear why, but its code can be slightly reduced. Here is my edit:

So, I think the solution to your problem is that you only need to get the contents of the anchors you want to highlight. Here follows jsfiddle: jsfiddle . Basically, I aimed at anchor tags and used the .each() function to replace what is in each anchor tag, depending on what the user is looking for.

api documentation for .each
javascripts replace function

HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <input type="text" id="searchfor" /> <ul id="all_text"> <li><a href="/somewhere">Somewhere</a></li> <li><a href="/somewhere-else">Over there</a></li> </ul> 

CSS

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

Js

 $('#searchfor').keyup(function(){ var $page = $('#all_text a'); var searchedText = $('#searchfor').val(); $page.each(function(i,a){ $a = $(a); $a.html($a.html().replace(/<span>/g,"").replace(/\<\/span\>/g,"")); var html = $a.text().replace(new RegExp("("+searchedText+")", "igm"), "<span>$1</span>"); $a.html(html); }); });