Jump to content

Basic search function with highlight


Lucy

Recommended Posts

I've written this code for a function which will look through text and find a search term, state how many times it was found and now, hopefully, highlight every instance. Having some trouble with the highlight part. It's supposed to highlight every letter of the search term as it finds it, but is in fact only highlighting the very first instance of the search term - after that, it appears to go back through the first instance of the term instead of continuing through the text with the rest of the stuff. Sorry, I might edit this tommorow so it makes more sense, it's my bed time soon :P

 

Any idea where I've gone wrong?

 

Code:

"use strict";var div = document.getElementById("main");var para = document.createElement("p");var br = document.createElement("br");var inputBox = document.getElementById("searchterm");var text = document.getElementById("searchable").innerHTML.toLowerCase();var num = [];document.forms[0].onsubmit = function(event)	{	event.preventDefault();	para.innerHTML = '';	num.length = 0;	var hiCounter = 0;	var y = [];	var userInput = inputBox.value.toLowerCase();		for (var a = 0; a < text.length; a++)	{			if (text[a] === userInput.substring(0,1))	{				for (var b = a; b < (userInput.length + a); b++)	{					if (text.substring(a, userInput.length + a) == userInput)	{						num.push(text[b]);						var highlight = '<span>' + text.substring(a, b+1) + '</span>';						y[hiCounter] = text.substring(a, b+1);						var q = text.replace(y[hiCounter], highlight);						hiCounter++;						document.getElementById("searchable").innerHTML = q;					}				}			}		}	//Display results here	var result = num.length / userInput.length;	var searchInfo = document.createTextNode('You searched for: ' + userInput);	var searchResult = document.createTextNode('Found ' + result + ' times');	para.appendChild(searchInfo);	para.appendChild(br);	para.appendChild(searchResult);	div.appendChild(para);};

Also, I know it's not that useful and the browser has a much better function built in, but I'm just doing this for practice.

 

Thanks for any and all help.

Edited by Lucy
Link to comment
Share on other sites

Hi Lucy, Good day., Kindly look at these...

 

http://www.the-art-of-web.com/javascript/search-highlight/I hope that it will help you a lot.

Thank you...

Link to comment
Share on other sites

Thank you for the link - but I don't want to just copy what someone else has done. Just want to understand what is wrong with my code.

 

 

Edit - right, I get what's happening now.

y[hiCounter] = text.substring(a, b+1);

^ That returns the actual, literal substring, which isn't what I was trying to do. I wanted it to keep it as text.substring[...]. :/

Edited by Lucy
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...