Lucy Posted February 26, 2015 Share Posted February 26, 2015 (edited) 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 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 February 26, 2015 by Lucy Link to comment Share on other sites More sharing options...
WebOutGateway Posted February 26, 2015 Share Posted February 26, 2015 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 More sharing options...
Lucy Posted February 26, 2015 Author Share Posted February 26, 2015 (edited) 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 February 26, 2015 by Lucy Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now