JavaScript Search Keyword Highlight - Web Development and Web Design Codes

Latest

Saturday, March 3, 2018

JavaScript Search Keyword Highlight

JavaScript Search Keyword Highlight

Hi Friends in this lesson we will learn how to highlight search Keywords With JavaScript..
JavaScript Search Keyword Highlight
JavaScript Search Keyword Highlight
index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<head>
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded',function(){
 var searchpara=document.getElementById("paragraph").innerHTML;
 searchpara=searchpara.toString();
 document.getElementById("search_text").onkeyup =function ()
 {highlight_word(searchpara)};
},false);
 
function highlight_word(searchpara)
{
 var text=document.getElementById("search_text").value;
 if(text)
 {
  var pattern=new RegExp("("+text+")", "gi");
  var new_text=searchpara.replace(pattern, "<span class='highlight'>"+text+"</span>");
  document.getElementById("paragraph").innerHTML=new_text;
 }
}
</script>
 
<style>
#paragraph
{
 color:grey;
}
input[type=text]{
  padding:5px;
  border-radius:4px;
}
.highlight
{
 color:red;
 font-style:italic;
 font-size:16px;
 font-weight:bold;
 text-transform:capitalize;
 text-decoration:underline;
}
</style>
<body>
<h3>JavaScript Search Keyword Highlight</h3>
<input type="text" id="search_text">
<div style="width:40%">
<p id="paragraph">Welcome To Codenair..Best place to Learn PHP MySQL,PHP,jQuery,AJAX,Codeigniter,Wordpress and much More..Keep Visiting For More Codes and Snippets.Thank You..</p>
</div>
</body>
</html>

That's it How to highlight search keywords with JavaScript..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article use ajax in codeigniter Older Article Meta Tags Generator Using PHP
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)