Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
.highlightExactMatches {
​
    background-color: green
}
.highlightSynonyms 
    background-color: yellow
}
</style>
<script src="script.js"></script>
<body>
<h1> Welcome to jquery. </h1>
  <input  placeholder="Enter search term." id = "searchTerm" onkeydown="javascript: if(event.keyCode == 13) ready();" autofocus>
​
    <p> Now we will see how highlighting works. </p>
<p> We might even search for a word, like Irhad and then highlight it.
Since it is exact we might decide to use green color to highlight it. </p>
<p> Once you enter a word in the above field, all the occurences of the field
will be highlighted. For example 
<span class="highlightSynonyms"> Irhad </span>
Irhad.
Irhad.
All of those occurences will be highlighted.
placeholder.
</p>
<div id = "sex"> 
<p> I'm telling he said, <span class="highlightSynonyms"> sex </span> will make you very healthy. Ir<u>had</u> </p>
</div>
</body>
​
​
</head>
​
​
 
​
function ready() {
    alert(document.getElementById("searchTerm").value);
  hightlightExactMatches(document.getElementById("searchTerm").value);
}
function getSearchTerm() {
    return document.getElementById("searchTerm").value;
}
function highlightExactMatches(searchTerm) {
    var str = getSearchTerm();
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers