Javascript Highlight Search Keywords

Highlight search keywords allows users to easily highlight the search words or text in the webpage.

Features

Useful for visitors to find the relevant content by highlighting keywords.
Free highlight search text script is case insensitive.
Responsive and easy to integrate in your webpage.

Preview

Highlight Search Words Using Javascript

We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users. If you are designing a website, then you can find all the resources you need for webmasters and web developers such as free scripts, web tools, programming tutorials, web design and applications, clipart images, web icons etc. Free website contents that help to develop, build, promote and maintain a web site. Hscripts.com offers a collection of quality webmaster resources and tools for web masters and developers. Easy to use, these web tools can really help you build, promote, or enhance your web site. Sign up today for our free newsletter to know the hottest resource added. Good collection of jquery scripts which are used by thousands of websites around the world. Make use of the simple copy and paste codes into your web pages. The examples are free to download. Start downloading our free Jquery script examples which are commonly used in all web applications. With our expertise and knowledge, hscripts are also developing scripts to handle customer needs. Contact us at support@hscripts.com for outsourcing script and programs, projects or product development.

©h

Downloads

Code

<html>

<head>

<title>Responsive Highlight Search Text / Words Using Javascript
</title>
<script type="text/javascript">
function highlightSearch() {
var word = document.getElementById("query").value;
var regex =new RegExp(word, "g");
var search = document.getElementById("searchtext").innerHTML;

var searchnew = search.replace(/(<span>|<\/span>)/gim, "");
document.getElementById("searchtext").innerHTML = searchnew;
var newsearch = searchnew.replace(regex, "<span>"+word+"</span>");

document.getElementById("searchtext").innerHTML = newsearch;
}
function oncall()
{
var sds = document.getElementById("dum");
if(sds == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}var sdss = document.getElementById("dumdiv");if(sdss == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
document.getElementById("text").style.visibility="hidden";} }window.onload=oncall;
</script>
<style>
#searchtext span{background-color:#FF9;color:#555;
}
div {padding: 10px;
}
.container{width:100%;margin-top:25px;margin-bottom:25px;padding:4px;background:rgb(204, 204, 204);
}
.searchbox{margin: 0;height:50px;background: #DADADA;
}
.frms
{margin:0 auto;padding:10px;
font-family:Tahoma, Geneva, sans-serif;color:#333;
font-size:.9em;line-height:1.2em;
}
.frms input[type="text"]
{width:99%;background:#fff;
border:#ddd 1px solid;border-radius:.35em;
-moz-border-radius:.35em;-webkit-border-radius:.35em;
-o-border-radius:.35em;padding:0 .5%;
margin-top:5px;margin-bottom:15px;height:35px;
}
.frms input:hover
{box-shadow:#dae1e5 0px 0px 5px;
-moz-box-shadow:#dae1e5 0px 0px 5px;-webkit-box-shadow:#dae1e5 0px 0px 5px;-o-box-shadow:#dae1e5 0px 0px 5px;
}
.frms input:focus
{-webkit-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
-moz-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);border:#9d9983 1px solid;
}
.resp_code
{
margin:5px 10px 10px 300px;
padding:10px 20px 10px 20px;
font: 1em/1.3em Tahoma,Geneva,sans-serif;
overflow:auto;width:50%;
}
body{
font: 0.81em/150% Tahoma,Geneva,sans-serif;
}
@media screen and (max-width: 480px)
{
.resp_code
{width:auto !important;margin:0px !important;
}
}
</style>
</head><body>
<p align='center'><b> Highlight Search Words Using Javascript</b></p>
<div class='container resp_code' id='text'>
<form action="" method="" id="search" name="search" class='frms'><span id='searchbox' class='searchbox'><input name="query" id="query" type="text" size=7 placeholder='Search in the text' autocomplete='off' onkeyup='highlightSearch()'>
</span>
</form>
<div id="searchtext">We welcome you to Hscripts.com.Praised as the best free webmaster resources online, by our users.If you are designing a website, then you can find all the resources youneed for webmasters and web developers such as free scripts, web tools, programming tutorials,web design and applications, clipart images, web icons etc. Free website contents that help to develop,build, promote and maintain a web site. Hscripts.com offers a collection of quality webmaster resourcesand tools for web masters and developers. Easy to use, these web tools can really help you build, promote,or enhance your web site. Sign up today for our free newsletter to know the hottest resource added.Good collection of jquery scripts which are used by thousands of websites around the world.Make use of the simple copy and paste codes into your web pages.The examples are free to download. Start downloading our free Jquery scriptexamples which are commonly used in all web applications. With our expertise and knowledge,hscripts are also developing scripts to handle customer needs.Contact us at support@hscripts.com for outsourcing script and programs, projects or product development.
</div>
</div>
<div id="dumdiv" align="center" style=" font-size: 10px;color: #dadada;">
<a id="dum" style="padding-right:0px; text-decoration:none;color: #dadada;text-align:center;" href="https://www.hscripts.com">©h</a>
</div>
</body>
</html>

Release Date - 22-06-2015
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com