5

After previously looking at this post, JQuery search in static HTML page with highlighting of found word, I have finally found what I was looking for. However, the search seems to break other HTML tags. I know it wasn't intended for my exact requirements but I'm looking for some help.

Here is a sample of 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 typing in the search box, it removes all <li> tags and all <a> tags. I'm not hugely confident with Javascript or Jquery so I can't figure this out for myself. It needs to retain the list and hyperlinks but only search in the visible text (i.e. not search in the href field).

All input is greatly appreciated.

Community
  • 1
  • 1
  • Try plugin such as http://bartaz.github.io/sandbox.js/jquery.highlight.html or similiar (Google offer some) – Mosh Feu Apr 14 '16 at 13:38
  • Thanks @MoshFeu. Managed to get it working with your recommendation. –  Apr 14 '16 at 14:26
  • The plugin recommended from Mosh Feu is not maintained (last commit from 2010), has disabled issues on GitHub and doesn't rebase to the original plugin (2 versions behind). You should be very very careful when using it. Instead, have a look at [mark.js](https://markjs.io/). – dude May 23 '16 at 19:57

2 Answers2

1

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

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 you use strong or em (depending on the semantics that you want).

Kim Aragon Escobar
  • 166
  • 1
  • 2
  • 15
  • I've edited your post please take a look. Here's the [jsfiddle](https://jsfiddle.net/k83j7Lqv/4/) from my edit – Anthony Apr 14 '16 at 15:19
0

Since my edit got rejected. Not entirely sure why but his code can be slimmed down quite a bit. Here's my edit:

So I think the solution to your problem is that you need to get only the content of the anchors that you want to highlight. Here follows the jsfiddle: jsfiddle. Basically, I targeted the anchor tags, and used the .each() function to replace what is within each anchor tag based on what the user searches 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);
    });
});
Anthony
  • 1,439
  • 1
  • 19
  • 36
  • I know. It was rejected by 3/5 people and approved by 2/5 people. The reason for rejection was: "This edit deviates from the original intent of the post. Even edits that must make drastic changes should strive to preserve the goals of the post's owner." I did not think it deviated from the original intent of the post. The only difference is that I used `span` instead of `em`. Otherwise it is just a slimmed down version of your code. – Anthony Apr 18 '16 at 17:52
  • man, I didn't saw your edit I didn't have the chance to approve nor reject it :/ i'm sorry about that. I don't know who have the powers to reject the edition. – Kim Aragon Escobar Apr 18 '16 at 17:56
  • 1
    No worries. I just wanted to post to show there is an alternative/slimmed down way to go about your answer. – Anthony Apr 18 '16 at 20:40