$(document).ready(function(){ $("#button").click(function(){ $("p").remove(); var input = $('input[name=P]').val(); var asd = $('input[name=S]').val(); text = input; var searching = asd; var l = searching.length var hits = []; var hits2 = []; var hitsID = []; var letter = []; var letter2 = []; var Ntext = []; for(var i = 0; i < text.length; i++) { letter.push(text.substring(i, i+1)); } console.log(letter) for(var i = 0; i < text.length; i++) { if (text[i] === searching.substring(0,1)) { for(var j = i; j < (l + i); j++) { hits.push(j); } } } console.log(hits) for(var i = 0; i < hits.length; i=i+ l) { //if (text[i] === searching.substring(0,1)) { var x ="" for(var j = hits[i]; j < (l + hits[i]); j++) { // if (letter[j]===searching.substring(j-i,j-i+1)) { x=x+letter[j] // console.log(j) // } } if (x===searching){ hits2.push(x) for(var j = 0; j < l; j++){ hitsID.push(hits[i]+j) } } // } } var o = 0 var O = "" for(var i = 0; i < letter.length; i++) { if(i===hitsID[o]){ letter2.push("<strong>"+letter[i]+"</strong>"); O=O+"<strong style='color:red'>"+letter[i]+"</strong>" o=o+1 }else{ letter2.push(letter[i]); O=O+letter[i] } } console.log(O) console.log(hits2) console.log(hitsID) $("#white").append("<p>"+O+"</p>"); }) }) // O |> _\/_ // -|- | PIRATES!!! /||\ // /\ | _________||_______ // ~~~\\\\\|/////~~~~~~~>O~~~~~~~~~~~__/|___~~~ / ______________ \ // ~~~~\\\\|////~~~~O<~~~~~O<~~~~~~~/_0_>___|>~ / /--------------\ \ // ~~~~~~\\|//~~~~~~>O~~~~~~~~~~~~~~~~~~~~~~~~~/ /----------------\ \ div { height:100px; width:50px; display: inline-block; ;*/ } { /*background-color:;*/ } { background-color:;*/ } { background-color:;*/ } { background-color:;*/ } { height:100px; width:300px; background-color:;*/ display: inline; ;*/ } { display: inline-block; height:20px; width:70px; background-color:; font-family:arial; font-weight:bold; color:; border-radius: 5px; text-align:center; margin-top:2px; } { display: inline-block; height:40px; width:200px; background-color:; font-family:arial; font-weight:bold; color:; border-radius: 5px; text-align:center; margin-top:2px; } <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="white"></div> <div> <form name="checkListForm"> <input type="text" name="P"/> </form> <div id="button2">Enter Paragraph above and search below</div> <h3></h3> <form name="checkListForm"> <input type="text" name="S"/> </form> <div id="button">Enter!</div> </div> </body> </html>
