Skip to main content

Simple Text Finder Using JavaScript

Screenshot
Body

In this code we will try to do Simple Text Finder using JavaScript. The program will find a certain text in a paragraph. The trick of this code is to use dot notation replace() in order to apply a highlighted color. To learn more about this, just follow the steps below.

Getting started:

First you have to download bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.

  1. <br />
  2. <!DOCTYPE html><br />
  3. <html lang="en"><br />
  4. <head><br />
  5. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/><br />
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><br />
  7. <style><br />
  8. .highlight{<br />
  9. background:orange;<br />
  10. font-weight:bold;<br />
  11. }<br />
  12. </style><br />
  13. </head><br />
  14. <body><br />
  15. <nav class="navbar navbar-default"><br />
  16. <div class="container-fluid"><br />
  17. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a><br />
  18. </div><br />
  19. </nav><br />
  20. <div class="col-md-3"></div><br />
  21. <div class="col-md-6 well"><br />
  22. <h3 class="text-primary">Simple Text Finder Using JavaScript</h3><br />
  23. <hr style="border-top:1px dotted #ccc;"/><br />
  24. <div class="col-md-4"><br />
  25. <div class="form-group"><br />
  26. <label>Search here..</label><br />
  27. <input type="text" id="keyword" class="form-control"/><br />
  28. </div><br />
  29. </div><br />
  30. <div class="col-md-8"><br />
  31. <p>The quick brown fox jump over the wall</p><br />
  32. </div><br />
  33. </div><br />
  34. <script src="js/jquery-3.2.1.min.js"></script><br />
  35. <script src="js/script.js"></script><br />
  36. </body><br />
  37. </html><br />

Creating the Script

This code contains the script of the application. The code will dynamically find and highlight a text. To do this just copy and write these block of codes inside the text editor, then save it as script.js inside the js folder.

  1. <br />
  2. function textFind(keyword){</p>
  3. <p> if(keyword){<br />
  4. var content = $('p').text();<br />
  5. var searchText = new RegExp(keyword, "ig");<br />
  6. var matches = content.match(searchText);</p>
  7. <p> if(matches){<br />
  8. $("p").html(content.replace(searchText, function(match){<br />
  9. return "<span class='highlight'>"+match+"</span>";<br />
  10. }));<br />
  11. }else{<br />
  12. $('.highlight').removeClass('highlight');<br />
  13. }<br />
  14. }else{<br />
  15. $('.highlight').removeClass('highlight');<br />
  16. }<br />
  17. }</p>
  18. <p>$(document).ready(function(){<br />
  19. $('#keyword').on('keyup', function(){<br />
  20. textFind($(this).val());<br />
  21. });<br />
  22. });</p>
  23. <p>

There you have it we successfully created a Simple Text Finder using JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Add new comment