Menu
I've been trying to make a simple search inside a static HTML page using JQuery. I have to mention that this is just my first time working with JQuery.
I'm trying to change the background of the found word in the page and this is what I've tried so far:
myJavascript.js:
$(document).ready(function(){ $('#searchfor').keyup(function(){ page = $('#all_text').text(); searchedText = $('#searchfor').val(); $("p:contains('"+searchedText+"')").css("color", "white"); }); }); Here's the HTML code as well:
page.html:
<html> <head> <title>Test page</title> </head> <body bgcolor="#55c066"> <input type="text" id="searchfor"></input> <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. <font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font> </p> </body> <script src="jquery-1.7.2.min.js"></script> <script src="myJavascript.js"></script> </html> After inspecting the page with Firebug I can see that the variables in JQuery do get the value from the input field but I guess I'm messing up the highlighting part.
Thanks in advance for your help!
936
We can use the replace() method with either regular expression or string as an argument. How to find the number of occurrences of a particular word or a string in a given string or paragraph. In this case, we will use the indexOf() Method in JavaScript to find the number of occurrences of desired word or substring.
The reason why it's probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved. Challenges:
innerHTML)Sounds complicated? If you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, search inside iframes, separated word search, etc. this becomes more and more complicated.
When using an existing, well implemented plugin, you don't have to worry about above named things. The article 10 jQuery text highlighter plugins on Sitepoint compares popular highlighter plugins. This includes plugins of answers from this question.
mark.js is such a plugin that is written in pure JavaScript, but is also available as jQuery plugin. It was developed to offer more opportunities than the other plugins with options to:
DEMO
Alternatively you can see this fiddle.
Usage example:
// Highlight "keyword" in the specified context $(".context").mark("keyword"); // Highlight the custom regular expression in the specified context $(".context").markRegExp(/Lorem/gmi); It's free and developed open-source on GitHub (project reference).
$(function() { $("input").on("input.highlight", function() { // Determine specified search term var searchTerm = $(this).val(); // Highlight search term inside a specific context $("#context").unmark().mark(searchTerm); }).trigger("input.highlight").focus(); });mark { background: orange; color: black; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> <input type="text" value="test"> <div id="context"> Lorem ipsum dolor test sit amet </div>Do something like this
$("p:contains('"+searchedText+"')").each( function( i, element ) { var content = $(element).text(); content = content.replace( searchedText, '<span class="search-found">' + searchedText + '</span>' ); element.html( content ); }); .search-found { text-decoration: underline; } p.s. this will work only if each of the "elements" has plain text only content otherwise it would remove children nodes
EDIT: removed the extra ')' in the each callback
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
